시멘틱 마크업이란 의미론적 마크업이라는 뜻으로, 요소가 자기 스스로 자신이 사용된 의미를 명확하게 전달해주는 것을 의미한다.


수 많은 div 요소의 역할을 대체하여 의미있는 마크업을 할 수 있다는 장점을 가지고 있다. 시멘틱 태그를 사용하면 컴퓨터가 레이아웃을 읽을 수 있고 검색사이트의 노출을 용이하게 한다.
그리고 수정에도 용이하며 코드의 가독성이 좋아진다.



이전 버전에서는


<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div class="article"></div>
<div id="aside"></div>
<div id="footer"></div>


이렇게 div에 id 또는 class 값을 부여하여 마크업을 하였다면



HTML5에서는


<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>


이렇게 마크업 할 수 있다.



html5에서 추가된 대표적인 시멘틱 태그들은 다음과 같다.

  1. header
    -header 태그는 문서 혹은 섹션에서의 헤더 영역을 정의한다. 한 문서 내에 여러개의 header 요소가 존재할 수 있다.

  2. nav
    -nav 태그는 문서의 네비게이션 영역을 정의한다.

  3. main
    -main 태그는 문서의 주요 컨텐츠 영역을 정의한다. 한 문서에서 한 번만 존재해야 한다.

  4. section
    -section 태그는 문서의 섹션 영역을 정의한다. 섹션 영역은 제목을 가지고 있으며, 문서의 전체적인 내용과 관련된 콘텐츠들을 가진다.

  5. article
    -article 태그는 문서의 독립적인 하나의 기사 영역을 정의한다.

  6. figure, figcaption
    -figure 태그는 이미지나 비디오 등의 독립적인 컨텐츠를 정의할 때 사용한다. figcaption 태그는 figure 태그를 위한 설명을 정의한다.

  7. footer
    -footer 태그는 문서 혹은 섹션에 대한 푸터 영역을 정의한다. 보통 작성자나 저작권 정보 등을 명시한다. 한 문서 내에 여러개의 footer 요소가 존재할 수 있다.