[HTML] 시맨틱 태그(semantic tag)

시맨틱이란 '의미론적' 이라는 뜻을 가지고 있다.

이러한 시맨틱과 태그가 만나 시맨틱 태그라는 이름이 만들어졌다.

시맨틱 태그란 태그만 보고도 브라우저와 개발자 모두에게 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다.

이렇게 시맨틱 태그를 사용하여 구조화한 웹을 시맨틱 웹이라고 한다.

일반 html 태그를 사용하여 페이지 구조를 잡아도 되지만 시맨틱 태그(sematic tag)를 사용하는 몇가지 이유가 있다.

첫번째. 검색엔진이 html 코드를 확인하고 그 의미를 해석하고 인지하여야하는데 이때 시맨틱 태그(semantic tag)를 사용하면 검색엔진이 보다 쉽게 웹 문서를 파악하여 보다 정확하게 검색하는데 도움을 준다.

동일한 디자인의 제목이라고 할지라도 h1 태그를 사용한 제목과 div 태그를 사용하여 동일한 외형을 가진 제목은 외형만 같은뿐 검색엔진이 인식하는 내용은 전혀 다르다.

두번째, 어떠한 장애가 있더라도 웹사이트를 이용하는데 불편을 없게하기 위해서이다. 웹 접근성 시각에서 볼 때 시맨틱 태그는 매우 중요하다.

시각장애인들은 웹사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 이용하는데 이때 시맨틱 태그를 통해 

어느 부분이 제목이고 내용인지 구별할 수 있으므로 그만큼 사이트 내용을 정확히 전달할 수 있기 때문이다.

또한 태그에 대한 역할이 정확히 정해져있기 때문에 어떤 장치에서든 문서를 똑같이 해설할 수 있다.

HTML5에서 새롭게 추가된 시맨틱 태그들이다.

1. header : 헤더를 의미한다
2. nav : 내비게이션을 의미한다
3. aside : 사이드에 위치하는 공간을 의미한다
4. section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다
5. article : 분문의 주내용이 들어가는 공간을 의미한다
6. footer : 푸터를 의미한다

section 안에 article 뿐만 아니라 nav(메뉴), main(본문), aside(광고)등으로 구성되기도 한다.

시맨틱 태그들은 div와 마찬가지로 기본적으로 block 레벨 속성을 가지고 있다.

문서의 구조를 잡을 때 div로 구역을 나누게되는데 그런경우 div가 너무 많아지게 되고 각각의 div마다 id를 붙여야하는데 세세한 부분은 id를 붙여서 나누는것도 좋지만 큰 단락을 결정할때는 Semantic 태그를 사용하는 것이 좋다.

그러므로 div 태그의 경우 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때 사용하면 좋다.