시맨틱 태그(Semantic Tag)란?

💡 semantic : 의미의, 의미론적(형용사)

시맨틱의 뜻을 보면 시맨틱 태그란 의미가 있는 태그를 의미합니다.
<div>, <span> 같이 의미가 없는 태그를 보면 어떤 내용인지 유추할 수 없습니다. 반면에 <form>, <header>, <main> 등 의미가 있는 태그는 내용을 명확하게 정의합니다.

시맨틱 태그의 장점

• 검색 엔진은 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주합니다.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 안내판으로 사용할 수 있습니다.
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는
  를 탐색하는 것보다, 의미있는 코드 블럭을 찾는 것이 훨씬 편리하고 쉽습니다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다.
• 의미있는 이름짓기는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기를 반영합니다.

시맨틱 태그의 종류

태그	설명
header	소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
footer	가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다.
main	body의 주요 콘텐츠를 나타냅니다.
section	HTML 문서의 독립적인 구획은 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
article	문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
aside	문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다.
nav	문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다.

---

✅ 참고 사이트

• https://developer.mozilla.org/ko/docs/Glossary/Semantics