시맨틱 태그

시맨틱 태그란?

시맨틱 태그란 의미가 있는 태그를 말한다.
div 태그를 사용해서 영역을 만드는 것이 아닌, header, main, footer 와 같은 의미가 있는 태그를 이용하는 것을 말한다.

시맨틱 태그를 사용하는 이유

1. 검색엔진 최적화 (SEO)

• 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그런 경우에, 시맨틱 태그를 사용하면 더 정확한 구조로 분석할 수 있도록 도와준다.

2. HTML 구조화

• HTML 에 코드가 구조화 되어 가독성 및 유지보수가 향상된다.

종류

• header: 헤더 영역에 대한 태그.
• nav: 네비게이션 영역에 사용하는 태그.
• section: article 보다 큰 영역을 나타낼 때 사용하는 태그.
• aside: 사이드 영역에 사용하는 태그. 보통 top 버튼이나, 본문 영역과 별개의 내용을 포함.
• footer: 푸터 영역에 사용하는 태그.

예시

대표적으로 아주 유명한 사이트인 mdn 사이트가 시맨틱 태그로 되어 있다.

https://developer.mozilla.org/ko/