시맨틱 태그란?

개요

시맨틱 태그는 웹페이지에서 콘텐츠의 의미와 구조를 나타내는 태그이다. 시멘틱 태그를 사용하면 검색 엔진 최적화(SEO)와 웹접근성, 유지보수성 등을 개선하는 데 도움이 된다. 그렇다면, 시멘틱 태그에는 어떤 태그들이 존재할까?

시멘틱 태그의 종류

HTML5에서는 다음과 같은 시맨틱 태그들이 추가되었다.

• header: 웹페이지나 섹션의 헤더

• nav: 네비게이션 링크들을 감싸는 요소 - 웹사이트의 메인 메뉴, 목차 등

• section: 문서의 구획을 정의. 주로 콘텐츠를 묶어서 표시

• article: 문서, 페이지, 사이트에서 독립적으로 구성 가능한 영역을 정의 - 블로그 포스트, 뉴스 기사 등

• aside: 문서의 주요 콘텐츠와 직접적인 연관성은 없지만, 부가적인 정보를 제공하는 영역 정의 - 광고, 사이드바 등

• footer: 웹페이지나 섹션의 푸터

• main: 문서의 주요 콘텐츠를 감싸는 요소로, 문서의 핵심 내용 포함

• figure, figcaption: 그림, 도표, 사진 등의 삽화를 정의하고, 그 캡션을 정의

결론

시맨틱 태그들은 문서의 의미와 구조를 분명히 나타내어 검색 엔진이 문서의 내용을 정확히 파악할 수 있게 하고, 웹 접근성을 개선할 수 있다. 또한 코드의 가독성과 유지보수성도 향상시켜 준다.