HTML 시맨틱 태그 알아보기 (Semantics)

프로그래밍에서 Semantics는 코드 조각의 의미를 뜻한다.

HTML에서의 시맨틱은 구조를 표현하는데 있어서 올바른 의미를 나타내는 시맨틱 태그를 사용하는데 있다.

예를 들어, div로 거의 모든 시맨틱 구조를 나타낼 수 있지만. 우리는 그렇게 하지 않는다.

 

😃 시맨틱 태그를 사용하면, 다음과 같은 장점들이 있다.

- 적절한 시맨택 태그를 사용하는 것이 의미를 전달하는데 도움이 되고, 실제로 더 많은 정보를 가진다. 따라서 개발을 더 쉽게 할 수 있고 협업에도 도움이 된다.

ex) div 태그로 버튼을 구현하는 것보다 button 태그로 버튼을 구현하는 것이 더 구조를 파악하기 쉽다.

- 시맨틱 태그를 사용한 HTML의 파일 크기가 그렇지 않은 HTML보다 더 가볍고, 반응형으로 만들기가 쉽기 때문에 모바일 환경에서 적절하다.

- 검색엔진은 div 태그에서 제공되는 키워드보다, headings, links 등을 표현하는 적절한 시맨틱 태그 내부의 키워드를 더 중요시한다. 따라서 SEO 최적화를 위해서는 올바르게 시맨틱 태그를 사용하는 것이 중요하다.

- 시각 장애가 있는 사용자가 화면 판독기를 사용할 때, 시맨택 태그가 도움이 될 수 있다.

 

🍒 Text를 표현하는 시맨틱 태그들

- 제목, 소제목을 나타내기 위해서는 h 태그를 사용한다.

- 글 단락을 나타내기 위해서는 p 태그를 사용한다.

- 목록을 나타내기 위해서는 ol/ul, li 태그를 사용한다.

시맨틱 태그를 사용하지 않고, br 태그를 사용하여 줄바꿈을 하는 경우 HTML의 접근성이 낮아지므로 지양한다.

 

🥝 테이블 레이아웃을 표현하는 시맨틱 태그들

- table, tr, td와 같은 태그를 통해서 테이블을 표현할 수 있다.

<table>
      <tr>
        <td colspan="6">
          <h1 align="center">Header</h1>
        </td>
      </tr>
</table>

 

🍉 좀 더 현대적인 구조를 표현하는 시맨틱 태그들

- header 태그를 통해서 최상단의 페이지 헤더를 작성한다.

- nav 태그를 통해서 navigation과 관련된 태그들을 묶을 수 있다.

- main 태그에 페이지의 메인 컨텐츠들을 담는다.

- section 태그를 이용하여 주제별로 컨텐츠를 분리한다.

- article 태그를 통해서 독립적인 아티클을 작성할 수 있다.

- aside 태그로 사이드에 존재하는 컨텐츠를 작성한다.

- footer 태그로 페이지 최하단의 footer 정보를 작성한다.

 

🥗 사용자와 상호작용하는 UI 컨트롤러 태그들

- 링크를 나타내기 위한 a 태그

- 버튼을 표현하는 button 태그

- 사용자의 입력을 받기 위하여 사용하는 input 태그.

- section태그와 option 태그를 통해서 사용자에게 선택지를 제공할 수 있다.

- 입력에 대한 정보를 전달하기 위해서 label 태그가 함께 사용될 수 있다.

 

그 외에도 HTML5에서 추가된 figure와 figcaption이 있는데, 이미지에 대한 캡션을 제공할 수 있다.

<figure>
  <img src="ambiguous.png" alt="ambiguous">
  <figcaption>This image is showing a cat</figcaption>
</figure>

img태그는 항상 이미지를 정상적으로 불러올 수 없는 환경에 대비하여 대체 택스트를 설정한다.

🥘 alt, aria-labelledby 속성을 사용한다.

 

🍙 이외에도 의미가 있는 시맨틱 태그들은 백여가지가 넘고, 이들은 MDN 문서에서 확인할 수 있다.

 

🥪 참고 자료들

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements

https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://developer.mozilla.org/ko/docs/Learn/Accessibility/HTML

HTML: 접근성을 위한 기초 - Web 개발 학습하기 | MDN