시맨틱 태그(Semantic Tags)란

 

시맨틱 태그(Semantic Tags)란 무엇인가?

정의

시맨틱 태그는 HTML5에서 도입된, 태그 이름 자체로 그 내용의 의미와 목적을 명확히 표현하는 태그들을 말합니다.

기존의 <div>나 <span> 같은 일반적인 태그와 달리, 시맨틱 태그는 웹 페이지의 각 부분이 어떤 역할을 하는지 브라우저와 개발자 모두에게 명확히 전달합니다.

시맨틱 태그 vs 비시맨틱 태그

<!-- 시맨틱 태그 사용 예 --> <header> <nav>...</nav> </header> <main> <article> <section>...</section> </article> </main> <footer>...</footer> <!-- 비시맨틱 태그 사용 예 --> <div id="header"> <div class="nav">...</div> </div> <div id="main-content"> <div class="article"> <div class="section">...</div> </div> </div> <div id="footer">...</div>

주요 시맨틱 태그 목록

• <header> - 문서 또는 섹션의 머리말
• <nav> - 네비게이션 링크
• <main> - 문서의 주요 콘텐츠
• <article> - 독립적인 콘텐츠
• <section> - 문서의 일반적인 구역
• <aside> - 사이드바 등 부가적 콘텐츠
• <footer> - 문서 또는 섹션의 바닥글
• <figure>와 <figcaption> - 이미지와 설명
• <time> - 날짜/시간 정보
• <mark> - 강조 표시된 텍스트

시맨틱 태그 사용의 장점

1. 검색엔진 최적화(SEO): 검색엔진이 페이지 구조를 더 잘 이해
2. 접근성 향상: 스크린 리더 사용자가 콘텐츠를 더 쉽게 탐색
3. 코드 가독성: 개발자가 문서 구조를 직관적으로 이해
4. 유지보수 용이: 의미론적 구조로 인해 수정이 용이
5. 미래 호환성: 웹 표준 준수로 향후 기술과의 호환성 보장

© 2023 HTML5 시맨틱 태그 설명. 모든 권리 보유.