Simentic Tag

시멘틱 태그란 단어 그대로 의미가 있는 태그를 뜻한다.

의미가 있다는 말이 무엇인지 생각해보자.

<div>
    <div>Title</div>
    <div>
        <div>내용</div>
        <div>내용</div>
    </div>
</div>

이런 방식의 HTML이 있다고 생각해보자. 모든 태그가 div로 되어있어 어느 부분이 어떤 내용을 담고 있는지 파악하기가 힘들다.

<main>
    <h1>Title</h1>
    <article>내용</article>
    <article>내용</article>
</main>

하지만 이렇게 태그를 사용하면 어느 부분이 제목인지, 댓글 또는 본문인지 태그만 보고도 쉽게 유추가 가능해진다.

즉, 태그에 의미가 담겨 내용을 유추 할 수 있는 태그가 바로 시멘틱 태그이다.

따라서 검색엔진이 효율적으로 정보를 파악할 수 있기 때문에 SEO에서 유리하고, 태그 영역에 특성에 맞는 작업을 구분하여 유지 보수에 용이하다는 장점이 있다.

이제 자주 사용되는 몇 가지시멘틱 태그들을 살펴보자

• <header>

  • 문서 맨 위 헤더 부분에 위치하는 태그이다.

• <footer>

  • 문서 맨 아래 부분에 위치하는 태그이다.

• <nav>

  • 내비게이션 링크들의 모음을 의미한다.

  • 대부분의 경우 헤더 부분에 위치하기에 header태그와 헷갈릴 수 있지만 nav태그는 링크들의 집합으로 기억하면 될 것 같다.

• <main>

  • 문서의 메인 내용을 담는 태그이다.

  • 문서에서 유일해야 하며 여러 article 태그를 자식으로 가지며 구성이 가능하다.

• <article>

  • 독립적인 글(내용)을 담는 태그이다.

• <aside>

  • 문서의 측면에 위치하는 컨텐츠를 담는 태그. 주로 사이드 바에 사용된다.