Semantic Tag에 대해서

이승아·2022년 12월 13일

Semantic Tag란?

Semantic은 사전적으로 '의미의’ 라는 뜻의 단어로 그 자체에 의미를 가지고 있는 요소를 말한다. 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달 하면서 웹 문서의 구조를 쉽게 파악하기 위해 사용한다.

오늘 날의 웹 사이트는 위와 같은 구조로 설계되어 있다.
HTML5 이전에는 구조를 구분하기 위하여 div태그에 id 또는 class 등으로 구분하며 구조를 설계했으나 시멘틱태그를 사용 함으로써 보다 직관적인 구조의 설계가 가능해졌다.

article: 문서와 독립되어 있는 기사, 블로그 등 텍스트 위주의 페이지를 구성 할 때 사용

aside: 좌우 사이드의 공간을 의미하며, 부가적인 내용을 담고 있는 태그

details: 해당 내용의 중요성 또는 관련성 목적으로 사용하는 텍스트

figure: 웹문서에 이미지 같은 독립적인 콘텐츠를 포함하는 태그

figcaption: figure 태그에 포함된 이미지의 캡션을 정의하는 태그

footer: 문서 하단의 바닥 부분

header: 웹사이트의 상단에 위치해 있으며 로고를 포함하는 영역

main: 문서의 주요 주제를 나타내는 부분

mark: 맥락에 관련이 깊거나 중요 부분 강조

nav: 메뉴바를 표현하는 태그

section: 섹션을 구분하는 태그로 여러개의 콘텐츠를 그룹화

summary: 더보기/접기에서 보여지게되는 일종의 제목과 같은 역할

time: 날짜와 시간 정보를 html에게 전달하기 위해 사용

레이아웃을 만들 때 div태그를 사용해 웹문서를 만들 수 있다.그렇지만 시맨틱 태그를 활용해야 하는 이유는 무엇일까?

이렇게 시맨틱 태그로 구축한 사이트는 검색엔진에게 중요한 부분과 그렇지 않은 부분을 파악하게 해주어 상위에 노출될 확률이 높아진다 때문에 유저 입장에서는 보다 효율적인 검색이 가능하다.

태그를 사용하면 사용의미를 명확히 파악할 수 있기 때문에 어떤 부분인지 한 눈에 구별할 수 있다.
그러므로 다른 작업자가 유지보수 할 때도 편해진다.

웹 브라우저가 HTML만 보고도 어느 영역인지 쉽게 알 수 있으며,스크린 리더기 등의 사용이 용이해진다.