시맨틱 태그란?

시맨틱(Semantic)은 '의미론적인'이라는 뜻을 가지고 있다.
말 그대로 의미를 가지고 있는 태그라는 말인데, HTML5부터 새로 도입된 태그들이다.
이 태그들은 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

예를 들어, 기존의 <div>태그는 non-semantic 태그이고 <nav>나 <article>같은 태그들은 semantic 태그라고 할 수 있다.

일반적으로, 기존의 <div> 태그 같은 경우 id나 class명으로 태그 안의 내용을 유추해볼 수 있었는데 시맨틱 태그들을 활용하면 태그만 봐도 대략 이 태그에는 어떤 내용이 들어갈 것인지 유추할 수 있다. <nav>태그는 네비게이션 버튼들이 들어갈 것이고, <article>태그에는 글이 쓰여질 부분이라는 것을 태그만 봐도 알 수 있게 된다.

시맨틱 태그 도입전 웹 페이지에서 header와 footer를 구성한다고 생각해보자.

<div id="header">
  ...
</div>

<div class="footer">
  ...
</div>

이런식으로 id나 class명으로 구분을 지었지만 시맨틱 태그가 도입된 후 간단하게 해결되었다.

<header>
  ...
</header>

<footer>
  ...
</footer>

둘의 차이점은 id나 class명은 개발자가 마음대로 정의할 수 있었기 때문에, <div id="head">, <div id="hd">, <div id="hdr"> 등등 통일되지 않고 여러가지로 사용되었는데 시맨틱 태그를 제공함으로써 태그들의 의미를 명확히 한다.

시맨틱 태그의 종류

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

이 외에도 수 많은 태그들이 존재한다. 다른 태그도 보려면 MDN 참조

왜 시맨틱 태그를 이용해야 하는가?

HTML은 채워질 데이터를 나타내도록 코딩해야한다. 기본 프리젠테이션 스타일기반이 아니라. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할이다.

시맨틱 태그를 사용하면 아래와 같은 이점이 있다

• 검색 엔진은 시맨틱 태그를 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. (SEO 참조)
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시맨틱 태그를 푯말로 사용할 수 있다.
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영한다.