개요
시맨틱 태그는 웹페이지에서 콘텐츠의 의미와 구조를 나타내는 태그이다. 시멘틱 태그를 사용하면 검색 엔진 최적화(SEO)와 웹접근성, 유지보수성 등을 개선하는 데 도움이 된다. 그렇다면, 시멘틱 태그에는 어떤 태그들이 존재할까?
시멘틱 태그의 종류
HTML5에서는 다음과 같은 시맨틱 태그들이 추가되었다.
-
header: 웹페이지나 섹션의 헤더 -
nav: 네비게이션 링크들을 감싸는 요소 - 웹사이트의 메인 메뉴, 목차 등 -
section: 문서의 구획을 정의. 주로 콘텐츠를 묶어서 표시 -
article: 문서, 페이지, 사이트에서 독립적으로 구성 가능한 영역을 정의 - 블로그 포스트, 뉴스 기사 등 -
aside: 문서의 주요 콘텐츠와 직접적인 연관성은 없지만, 부가적인 정보를 제공하는 영역 정의 - 광고, 사이드바 등 -
footer: 웹페이지나 섹션의 푸터 -
main: 문서의 주요 콘텐츠를 감싸는 요소로, 문서의 핵심 내용 포함 -
figure,figcaption: 그림, 도표, 사진 등의 삽화를 정의하고, 그 캡션을 정의
결론
시맨틱 태그들은 문서의 의미와 구조를 분명히 나타내어 검색 엔진이 문서의 내용을 정확히 파악할 수 있게 하고, 웹 접근성을 개선할 수 있다. 또한 코드의 가독성과 유지보수성도 향상시켜 준다.