HTML5 시맨틱(Semantic) 태그

시맨틱(Semantic) 태그란

길게 설명할 필요가 없다. 태그 그 자체가 의미를 가지는 것을 의미한다. 이 태그가 어떤 의미를 가지고, 어떤 용도로 사용되는지 유추할 수 있다. HTML5에서 이런 태그의 쓰임은 검색엔진 최적화(SEO)에 용이하다. 로봇이 웹페이지를 읽을 때 어떤 부분을 어떤 용도로 긁어갈지 분석하고 사용할 수 있다.

HTML5에서 새로 제공하는 시맨틱 태그들

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

시맨틱 태그를 사용하지 않아도 기존 블록 태그(Div) 로만으로 충분히 페이지 구성이 가능하다. 그러나, 검색로봇이 페이지를 분석할 때는 어떤 태그가 무슨 의미를 지니는지 알 수 없기 때문에 정확한 정보를 추출하기가 어려울 수 있다. 따라서, 이러한 문제를 해결하고자 시맨틱 태그를 사용하는 것이다.

시맨틱 태그를 적극적으로 사용한 웹페이지의 구조를 파악하는 것은 로봇뿐만 아니라, 개발자들에게도 유용하다. 굳이 주석처리를 할 필요 없이, 어떤 위치의 태그가 어떻게 사용되었는지 쉽게 파악할 수 있기 때문이다.