시맨틱 태그(Semantic Tag)

HTML의 특징 중 하나인 시맨틱(Semantic) 태그에 대해서 알아보도록 하자.

 

시맨틱 태그란?

우선 시맨틱(Semantic)이라는 단어가 무슨 뜻인지 부터 살펴보도록 하자.

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

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

 

예를 들어, <div> 태그는 시맨틱이 아닌(non-semantic) 태그인 반면,

<table>, <article> 태그는 시맨틱(sematic) 태그라고 볼 수 있다.

 

<div> 태그만 보고는 이 태그에 어떤 것이 들어갔는지 알 수 없다.

하지만, <table>, <article> 태그는 대략 어떤 내용이 들어갈지 그 의미를 유추할 수 있다.

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

<article> 태그 안에는 글이 들어갈 것이라는 정도는 유추가 가능하다.

 

<div class="header">
<div id="footer">

위와 같이, 시맨틱 태그가 나오기 이전에는 header(머리글), footer(바닥글)를 표현하기 위해

<div> 태그를 사용하여 class 혹은 id 속성을 정의하였다면,  

 

<header>
<footer>

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

이것을 시맨틱 태그라고 부르며, HTML 태그의 의미를 더 명확하게 할 수 있다는 특징이 있다.

 

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

HTML5에서는 다양한 시맨틱 태그를 지원한다.

 

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

시맨틱 태그를 사용하는 이유?

기존에는 class, id 속성값으로 의미를 부여하였기 때문에,

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

HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정했다.

또한 시맨틱 태그를 사용하면 그 사용 의미를 명확하게 파악할 수 있기 때문에,

가독성도 높아지는 장점이 있다.

---

 참고 및 출처 : hianna.tistory.com/278