HTML5 시멘틱 태그

HTML은 버전이 있습니다. 이 글을 작성하고 있는 시점에서는 현재 5버전까지 출시된 상태입니다. 그렇기에 HTML5라고 명시하고 있습니다. 버전이 올라갈때마다 도태되는 태그가 있는 반면, 새로운 태그가 탄생하기도 합니다. 그 중 하나가 바로 시멘틱 태그라 불리는 녀석들인데 어떤 종류인지 바로 확인해 보겠습니다.

 

시멘틱 태그 종류

<header> : 헤더 영역

<nav> : 목록 혹은 목차 영역

<figure> : 멀티미디어 영역

<section> : 섹션. 특정 콘텐츠를 묶는 영역

<article> : 섹션 하부의 콘텐츠 영역

<aside> : 사이드 콘텐츠 영역

<footer> : 푸터 영역

 

대략 이 정도가 HTML5의 대표 시멘틱 태그입니다. 현재 친효스킨은 이 시멘틱 태그를 적극 사용중입니다. 티스토리 자체에서도 <figure>태그를 본문에서 사용중입니다. 시멘틱 태그를 사용하는 이유는 직관성 때문입니다. 과거에는 원래 이랬습니다.

 

기존 div 태그를 활용한 레이아웃

<div id="header">
    <div id="nav">
        <h1>목록</h1>
    </div>
</div>
<div id="content">
    <div class="article">
        <div>본문</div>
    </div>
</div>
<div id="aside">
    <div class="sidebar">사이드바</div>
</div>
<div id="footer">푸터</div>

이런 식으로 <div>태그만으로 레이아웃을 구성하고, 각 div마다 id값, class값을 부여해서 영역별 스타일을 만들어 주었습니다. 물론 지금도 이렇게해도 상관은 없습니다. 자신이 만들고 자신이 유지보수를 한다면 아무 문제는 없을겁니다. 하지만 언젠가는 이러한 방식들도 잘 사용되지 않을 수 있으니 기왕이면 새로운 시멘틱 태그를 사용해 영역을 쉽게 인식하도록 만들어주는게 검색엔진 입장에서도 좋아라 할만한 일이라고 생각합니다. 따라서 위의 태그를 시멘틱 태그를 사용해 변경하면 다음처럼 변신할 것입니다.

 

시멘틱 태그를 활용한 레이아웃

<header>
    <nav>
        <h1>목록</h1>
    </nav>
</header>
<section>
    <article>
        <div>콘텐츠1</div>
    </article>
    <article>
        <div>콘텐츠2</div>
    </article>
</section>
<aside>
    <div class="sidebar">사이드바</div>
</aside>
<footer>푸터</footer>

대충 이런 식으로요. 이렇게되면 레이아웃상 차이는 사실 없습니다. 하지만 CSS에서 요소를 선택함에 있어서 좀 더 직관적이되고 편리해집니다. 그리고 보시다시피 태그가 깔끔해집니다.

 

차이점

<div>만으로 완성된 레이아웃에 대한 CSS 스타일을 만들려면 직접선택자를 활용해 요소를 지정하기가 어려워집니다. 무슨 소리냐면 이미 각 위치별 요소에는 기본적으로 <div>태그가 몽땅 사용되었기 때문입니다. 그러므로 div div 이런식의 선택자 지정은 사실상 사용이 어렵다는 것입니다. 위에서 들었던 예시를 기준으로 다시 설명드리면 푸터 영역을 제외한 모든 영역에 div div가 사용되고 있습니다. 따라서 제대로 정확하게 경로를 지정하려면 아이디값, 클래스값을 같이 사용하여 지정해줘야 한다는 것입니다. 헤더 영역의 nav를 선택하려면 #header #nav 이런 식으로 아이디값으로 입력해야 한다는 소리지요.

 

반면 시멘틱 태그는 태그 자체가 아이디값의 성격을 지니고 있습니다. 즉 불필요한 아이디값이나 클래스값을 따로 부여하지 않아도 된다는게 큰 장점입니다. CSS에서 header 영역에 백그라운드 색상을 부여하고 싶다면 그냥 선택자를 header 하나만 사용하면 끝인 것입니다. 이것이 가장 큰 장점입니다. 끝.