[HTML5] 시맨틱 태그(Semantic Tag)란?

HTML5의 큰 특징 중 하나는 시맨틱(Semantic) 태그이다.

시맨틱(Semantic) 태그란?

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.

즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

예를 들어, <div> 태그는 non-semantic 태그라고 할 수 있고, 

<table>, <article> 등의 태그는 semantic 태그라고 볼 수 있다.

일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.

반면, <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.

<table> 태그 안에는 표가 들어갈 것이고, 

<article> 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다.

좀 더 자세히 살펴보면,

이전의 html에서 header나 footer를 표현하기 위해 아래와 같이 <div> 태그를 사용하여

개발자들이 자유롭게 class명이나 id를 정의하였다면,

<div class="header"> 

<div id="footer">

HTML5에서는 아래와 같이 미리 정의된 태그를 사용하게 된다.

<header>

<footer>

둘의 차이점은

<div> 태그 안의 이름은 개발자 마음대로 정의할 수 있기 때문에

헤더 정보 표현을 위해 <div class='head'> <div class='hd'> <div class='hdr'> 등 여러 방법으로 표현이 가능하지만,

HTML5에서는 시맨틱 태그를 제공하여 HTML태그의 의미를 명확하게 할 수 있다는 것이다.

이렇게 의미를 가지는 태그가 시맨틱 태그이고,

HTML5은 새로운 시맨틱 태그들을 제공한다.

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

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

이 외에도 HTML5에 새로 적용된 여러가지 시맨틱 태그들이 있다.

(이들에 대한 자세한 설명의 다음 포스팅에...)

왜 시맨틱 태그를 사용해야 하는가?

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에,

검색엔진이 html 파일을 분석할 때 정확하게 컨텐츠를 식별하기가 힘들었다.

HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정한 거라고 보면 될 것 같다.

이것이 얼마나 중요하고, 활용이 될지는 사실 잘 와닿지 않지만,

어쨌든 그리되었다고 한다.