시맨틱 태그(semantic tag)는 HTML 요소의 한 유형으로, 문서의 구조와 의미를 더 명확하게 표현하는 데 사용되는 태그입니다. 시맨틱 태그는 웹 페이지의 내용을 더 의미론적으로 구성함으로써 검색 엔진, 웹 접근성, 개발자 등에게 문서의 의도를 명확하게 전달하는 데 도움이 됩니다.
시맨틱 태그를 사용하면 해당 요소가 어떤 유형의 내용을 포함하는지 쉽게 이해할 수 있습니다. 예를 들어, 단순히 <div>나 <span>을 사용하는 대신 <header>,<nav>, <main>, <article>, <section>, <footer> 등의 시맨틱 태그를 사용하여 문서 구조를 더 명확하게 표현할 수 있습니다.
일반적인 시맨틱 태그의 예시:
<header>: 문서의 머리말을 나타냅니다. 사이트 로고, 제목 등을 포함할 수 있습니다.
<nav>: 네비게이션 링크를 포함하는 부분을 나타냅니다.
<main>: 문서의 주요 컨텐츠를 포함합니다.
<article>: 독립적인 내용 블록을 나타냅니다. 뉴스 기사, 포스트 등을 포함할 수 있습니다.
<section>: 주제나 테마로 그룹화된 내용을 나타냅니다.
<aside>: 주요 컨텐츠와는 관련성이 적은 부가적인 내용을 나타냅니다.
<footer>: 문서의 맨 아래 부분을 나타내며, 저작권 정보나 연락처 정보 등을 포함할 수 있습니다.
시맨틱 태그를 사용하면 웹 페이지가 논리적으로 구조화되며, 검색 엔진은 이러한 구조를 이해하여 웹 페이지의 콘텐츠를 더 정확하게 분석할 수 있습니다. 또한 웹 접근성 측면에서도 시맨틱 태그는 스크린 리더 등 보조 기기를 사용하는 사용자들이 페이지 내용을 이해하기 쉽도록 도움을 줍니다.
