Semantic Tag란?
Semantic은 사전적으로 '의미론적' 이라는 의미를 갖고 있다. 그래서 Semactic Tag 목적에 따라 어떤 특별한 의미가 부여된 태그임을 알 수 있다.
HTML5에서는 다양한 시맨틱 태그를 사용할 수 있도록 하고 있는데, 예를 들어 'h1' 은 페이지의 최상위 제목을 나타내는 Heading1의 의미를 갖고 있는 태그이다.
따라서 대부분의 브라우저에서는 h1 태그는 최상위 제목으로 보이게 표현해 준다.
Semantic Tag를 사용하는 이유
MDN Semantics 페이지를 바탕으로 작성함
출처: https://developer.mozilla.org/ko/docs/Glossary/Semantics
1. 검색엔진 최적화(SEO)
검색 엔진은 크롤러에 의해 웹 페이지를 수집한다. 이 때, 페이지의 구조를 분석하게 되는데 의미 없는 div, span으로 구현된 페이지는 크롤러가 그 의미를 캐치하기 어렵다. 하지만 div 대신, '여긴 제목이니까 h1이야', '여긴 이 페이지의 메인이 되는 main이야' 등 시맨틱한 태그를 사용하여 페이지가 구성되어 있으면, 크롤러가 페이지의 구조를 분석하기에 용이하다.
따라서 검색엔진에 의해 적확한 페이지 분석이 가능해지므로 검색 랭킹에 영향을 줄 수 있는 중요한 요소로 간주된다.
2. 배리어 프리(Barrier free)
시각 장애가 있는 사용자가 페이지를 탐색할 때, 시맨틱 태그로 구성된 페이지는 화면 판독기가 의미론적 마크업을 푯말로 사용할 수 있다.
3. 코드의 가독성
의미 없는 div와 span으로 구성된 페이지의 코드는 다른 개발자는 물론, 스스로도 파악하기 어려운 형태를 갖게 된다. 같은 div가 몇 번이나 반복되고 중첩되어 있으면 그 div 태그의 의미를 해석해야 하며, class나 id를 보고 의미를 파악해야 하는 불필요한 작업이 필요하게 된다.
