[HTML] 시맨틱 태그(Semantic Tag)란?

시맨틱 태그(Semantic Tag)

시맨틱 태그는 내가 정보를 담는 공간에 대해서 의미를 부여할 때 사용하는 태그입니다.

무언가를 담는 div태그는 class나 id를 적어주지 않는 이상 어떤 역할을 하는지 알 수 없는 태그지만 header, footer, aside와 같은 시맨틱 태그는 이 공간이 어떤 내용을 담을지에 대한 의미를 명확하게 알려줍니다.

시맨틱 태그 장점

• 검색엔진 최적화
• 코드 가독성 및 유지보수가 쉬워진다.
• 글을 소리로 알려주는 기계(스크린 리더기)를 사용하는 시작 장애인이 사이트의 구조를 소리로 구분할 수 있게 해줍니다.

시맨틱 태그 종류

• header: 페이지의 제목과 같은 소개 내용을 포함합니다.

• nav: 페이지의 메뉴 혹은 목차등을 나타낼 때 사용합니다.

• main: 페이지의 전반적인 내용을 보여주는 공간에 대해서 사용합니다.

• section: 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소

• article: 독립된 웹 콘텐츠 항목, 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 될 경우 사용
• aside: 본문 내용 외에 왼쪽이나 오른쪽에 사용하는 태그, 보통 광고등을 표시할 때 사용합니다.
• footer: 사이트의 맨 바닥부분에 사용합니다. 주로 연락처나 제작자 정보등을 기술하는 부분입니다.

요약