시멘틱 마크업(Semantic markup)

사전적 뜻은 '의미론적인' 정도로 해석할 수 있다.
즉, 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해하면 될 것 같다.

간단한 예로 div는 non-semantic 태그라 볼 수 있고
table, header, footer 등은 semantic 태그라고 볼수 있다.

table이면 표가 들어 갈 것이고, nav는 네비게이션을 의미할 것이라는 것을 유추 할 수 있다.

즉 시맨틱 태그를 보면 태그 자체만 봐도 어떤 의미로 사용 된 태그인지 알 수 있게 된다.

이렇게 의미를 가진 태그는 검색엔진이나 그 이외에 기계적인 동작들이 웹페이지를 쉽게 이해 할 수 있게 된다.

시멘틱 태그

100여개의 시맨틱 태그가 있다고 하는데, 중요한 몇 개만 정리해보면

• header
  일반적으로 웹사이트의 로고와 소개글 그리고 메인 메뉴가 위치
• nav
  네비게이션 역할을하는 태그
• main
  웹사이트의 컨텐트를 담고 있는 메인 영역. 메인 영역 내에서의 하위 영역 구분은 section 또는 article, aside 태그가 주로 사용됩니다.
• section
  하나의 주제를 그룹화할 때 사용합니다. (ex 뉴스 기사의 제목)
• article
  하나의 주제에 대해서 그 내용에 대해 설명할 떄 사용합니다. (ex 뉴스 기사, 블로그 글)
• aside
  흔히 사이드바라고 불리는 곳으로 보통 광고, 검색 기능, 카테고리 등을 표현합니다.
• footer
  페이지의 하단 영역에 사용되며, 일반적으로 웹사이트의 저작권 정보나 연락처와 같은 메타 데이터가 위치하게 됩니다.