시맨틱 태그(Semantic Tag)란?
HTML5에서 의미론적 요소를 담은 태그의 등장
시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
html5 이전의 html에서는 <div>태그의 class와 id를 톻해 정의하였다면,
<div class="header"></div>
<div id="footer"></div>
html5에서는 미리 정의되어 있는, 의미를 정확히 전달할 수 있는 태그를 사용할 수 있게 되었다.
<header></header>
<footer></footer>
시맨틱 태그의 장점
- 시맨틱 태그를 통해 컨텐츠의 의미를 명확하게 전달해준다.
- 개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현
- 단순히 구역을 나누는 것 뿐만 아니라 의미를 가지는 태그들을 활용하기 위한 노력
- Non semantic 요소는 div, span 등이 있으며 h1, table 태그들도 시맨틱 태그로 볼 수 있다.
- 요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고(접근성 향상) 유지보수를 쉽게 해준다.
- 검색엔진최적화(SEO)를 위해서 메타태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 할 필요가 있다.
대표적인 시맨틱 태그
- header : 문서 전체나 섹션의 헤더(머릿말 부분)
- nav : 내비게이션
- aside : 사이드에 위치한 공간, 메인 컨텐츠와 관련성이 적은 컨텐츠
- section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
- 본문의 여러 내용을 포함하는 공간
- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
- 본문의 주내용이 들어가는 공간
- footer : 문서 전체나 섹션의 푸터(마지막 부분)
- table : 표
* 시맨틱 웹
웹 상에 존재하는 수많은 웹 페이지들에 메타데이터를 부여하여,
기존의 단순한 데이터 집합이었던 웹페이지를
'의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상에서 시작
안 지켜도 에러가 나는 것은 아니지만, 적절하게 잘 사용을 하는 것이 유용하다.