[html] html5 시맨틱 태그란? 태그별 사용법

html을 이루는 기본 단위로 태그라는 것이 있다.

가장 대표적인 태그로는 div 태그가 있는데 <div></div> 이런 식으로 사용을 한다.

div 태그의 가장중요한 역할은 여러가지 요소들을 한데 묶어주는 역할을 한다.

 

<div>
	<h1>아이폰 사용법</h1>
    <p>아이폰이란 어른폰과 대비되는 제품으로, 많은 앱등이들을 만들어 낸 좋은 전화기이다.</p>
</div>

 

위와같이 제목과 내용을 분리하는 역할을 한다.

여기에서 div태그의 역할은 하나로 묶어주는 것 그 이상도 이하도 아니다.

사실 예전에는 그런식으로 사용을 많이 했었고 그렇게 사용해도 아무런 문제가 없다.

 

html5부터 여러가지 시맨틱 태그들이 생겨났다. 그렇다면 시맨틱 태그란 무엇일까?

 

시맨틱 태그란?

위에서 div는 아무런 의미를 가지지않는 묶기의 의미만을 가지고 있었다면 시맨틱 태그는 이러한 태그에 의미가 있는 태그를 말한다.

예를들어 다음과 같은 태그들이 있다.

 

태그	설명
header	웹문서 상단을 의미한다. 주로 로고, 타이틀 등이 포함되어 있다.
nav	내비게이션을 나타내는 태그이다. 주로 메뉴등이 포함된다.
aside	왼쪽 또는 오른쪽 사이드 부분을 나타내는 태그이다.
section	본문의 내용을 나타낸다.
article	마찬가지로 본문의 내용을 나타낸다. section과는 조금 다른 의미를 가지고 있다.
footer	웹문서의 하단 부분을 나타내는 태그이다.

 

이 외에도 의미를 가진 많은 태그들이 있지만 대충 이 정도가 구조를 분리하는 시맨틱 태그들이다.

그럼 이런 시맨틱 태그를 왜 사용해야 할까?

 

 

 

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

 

사실 웹 문서를 작성할때 시맨틱 태그를 사용할 필요는 전혀 없고 문법적으로도 아무런 이상이 없다. 그러나 이런 시맨틱 태그를 사용하는 가장 큰 이유는 바로 SEO 때문이다.

 

SEO(Search Engine Optimization) - 검색엔진최적화

검색엔진에서 웹문서가 잘 검색되도록 하는 것.

 

검색엔진은 저마다의 로봇이 웹사이트들을 돌아다니면서 웹문서를 읽어들인다. 이렇게 웹문서를 읽은 다음 자기 검색 엔진에 검색어가 입력되면 그에 맞게 웹사이트를 노출시켜준다. 

 

시맨틱 태그는 이런 검색엔진최적화가 보다 효율적이고 잘 되도록 도와주는 역할을 한다.

 

그래서 사실 검색노출이 굳이 필요없는 웹사이트나 애플리케이션같은 경우는 이런 작업이 굳이 필요하지 않지만 검색엔진에서 노출이 잘 되야하는 사이트 같은 경우는 이러한 시맨틱 태그를 잘 써주면 좋다.

 

시맨틱 태그 구조

 

대략 위와같이 섹션을 나눠서 태그를 이용하면 검색엔진최적화가 잘 될 것이다.

 

 

<section> vs <article>

section 태그와 article 태그의 차이를 한번 알아보겠다.

이 둘은 비슷하지만 약간 다른 차이가 있다. 둘다 본문의 내용을 나타내는 태그라는 점에서 의미는 비슷하지만 조금 다른 차이가 있다. 사실 이정도의 차이는 크지 않아서 구별 없이 사용해도 되겠지만 의미적 차이를 조금 알고 사용하면 그래도 모르고 사용하는 것 보다는 나을 것 같다.

 

section 과 article 은 누가 상위 태그이냐의 차이가 아니고 관계가 있는 내용끼리 묶느냐 아니냐에 따라 나뉜다.

아래 예시를 보면 한눈에 이해하기 쉬울 것이다. 아래처럼 section태그 안에 article들이 들어갈 수도 있고 article 안에 section 들이 들어갈 수도 있다.

<section id="main">
    <article>
      <!-- 첫번째 블로그 포스팅 -->
    </article>

    <article>
      <!-- 두번째 블로그 포스팅  -->
    </article>

    <article>
      <!-- 세번째 블로그 포스팅 -->
    </article>
</section>

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

 

 

약간 이해를 돕기 위해 부가적인 설명을 하자면 section은 기능적인 구분을 위한 태그이고 article은 같은 기능을 하고 있지만 다른 내용들을 포함하는 경우 사용하면 좋다는 뜻이다.

 

너무 깊이 이해하려 하지말고 대충 이정도로만 인지하고 사용해도 보다 풍부하고 다채로운 웹문서를 작성할 수 있을 것이다.