시맨틱 태그(Semantic tags)는 HTML에서 의미론적 요소를 정의하기 위해 사용되는 태그들을 말합니다. 이러한 태그들은 단순히 페이지의 스타일링을 위한 것이 아니라, 문서의 구조를 명확하게 설명하고, 웹 페이지의 각 부분이 어떤 역할을 하는지를 명시하는 데 도움을 줍니다.
시맨틱 태그는 검색 엔진 최적화(SEO)에 유리하며, 스크린 리더와 같은 보조 기술에 의한 웹 접근성을 향상시킵니다. 주로 사용되는 시맨틱 태그들은 다음과 같습니다:
<header>: 페이지나 섹션의 헤더(머리말)를 나타냅니다.<nav>: 내비게이션 링크의 집합을 나타냅니다.<section>: 문서의 독립적인 구역을 나타냅니다. 일반적으로 하나의 주제나 패널을 나타낼 때 사용됩니다.<article>: 독립적으로 구분되거나 재사용 가능한 콘텐츠 영역을 나타냅니다. 예를 들어 포럼 글, 신문 기사 등이 이에 해당합니다.<aside>: 주 콘텐츠와 간접적으로 관련된 부가 콘텐츠를 나타냅니다. 사이드바나 콜아웃 박스 등에 사용됩니다.<footer>: 페이지나 섹션의 바닥글을 나타냅니다.<figure>와<figcaption>: 독립적인 콘텐츠 항목(예: 이미지, 다이어그램, 코드 조각 등)과 그 설명을 그룹화합니다.
이 외에도 HTML5는 <main>, <time>, <mark>, <summary>, <details>와 같은 다양한 시맨틱 태그를 도입하여 웹 개발자가 보다 의미 있는 웹 문서를 작성할 수 있도록 지원합니다.
시맨틱 태그를 사용함으로써 개발자는 코드의 가독성을 향상시킬 뿐만 아니라, 웹 페이지의 구조를 논리적으로 만들 수 있습니다. 이는 검색 엔진이 콘텐츠를 더 잘 이해하고, 적절한 검색 결과를 제공하는 데 도움을 줄 수 있습니다.