HTML 작성 시 안티패턴들

HTML 작성 시 피해야 할 안티패턴들

🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다.

테이블 레이아웃

• 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다.
  🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다.
• 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다.

인라인 스타일

• HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다.
• 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다.

문자 창조 순서 (Character Entity References) 사용

• 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다.
• 하지만 이제는 대부분의 문자가 UTF-8 인코딩을 지원하므로 직접 해당 문자를 사용하는 것이 좋다.

불필요한 중첩

• 요소를 불필요하게 중첩하거나 여러 개의 빈 요소를 사용하는 것은 가독성을 저해하고 코드를 복잡하게 만든다.
• 가능한 단순한 구조를 유지하는 것이 좋다.

의미 없는 요소 사용

• 의미 없는 `div`나 `span` 요소를 과도하게 사용하는 것은 좋지 않다.
• 요소는 의미 있는 구조를 나타내도록 사용해야 한다.
  ⭐️ 시맨틱하게 요소를 작성하도록 하자

프레임 사용

• <frame>, <frameset>, <noframes> 등의 프레임 요소는 현재의 웹 표준에서는 사용을 권장하지 않는다.
• 프레임 대신 CSS Flexbox나 Grid를 사용하여 레이아웃을 구성하는 것이 더 좋다.

HTML에 스크립트 내용 포함

• 스크립트를 직접 HTML 내부에 작성하는 것보다는 외부 스크립트 파일을 연결하는 것이 좋다.
• 스크립트를 분리하면 코드 관리가 쉬워지고 캐싱과 성능도 향상된다.

절대 경로 URL

• 이미지나 링크에 절대 경로 URL을 사용하면 사이트 이동 시 문제가 발생할 수 있다.
• 상대 경로 URL을 사용하여 이동에 유연성을 확보하는 것이 좋다.

접근성을 고려하지 않은 마크업

• 시맨틱한 HTML 요소를 사용하여 문서 구조를 잘 표현해야 한다.
• `alt` 속성을 통해 이미지에 대체 텍스트를 제공하는 등 웹 접근성을 고려해야 한다.

브라우저 의존적 코드

• 특정 브라우저에서만 작동하는 코드를 사용하는 것은 피해야 한다.
  ❄️ 예를 들면, IE에서는 대부분의 최신 ES 문법을 사용할 수 없을 것이다.
  🌀 can i use에서 각 문법의 브라우저와 버전에 따른 지원 정보를 확인할 수 있다.
• 웹 표준을 준수하고 크로스 브라우징을 고려하는 것이 중요하다.

이러한 안티패턴을 피하고, 모범 사례에 따른 웹 개발을 수행하는 것이 코드의 품질과 유지보수성을 향상시키는 방법 중 하나이다.