HTML5 시맨틱 태그 (Semantic Tag)

Semantic Tag?

 

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

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

 

기존에 사용하던 div 태그는 non-semantic Tag라 할 수 있다.

table, article 등의 태그는 semantic Tag라 할 수 있다.

 

일반적으로 <div class="header"> 태그만 보고는 검색엔진이 이 태그 안에 들어간 내용의 의미를 알 수 없다.

HTML5에서 사용되는 시맨틱 태그는 <header>를 사용하여 검색엔진이 이 태그를 분석하여 내용의 의미를 유추할 수 있는 장점이 있다.

 

---

 

non-semantic Tag

주로 div로 레이아웃을 표현하며, class와 id로 스타일을 준다.

<div class="header">
	<div class="navi"></div>
	<div class="content"></div>
</div>

 

semantic Tag

의미있는 태그를 사용하여 검색엔진이 태그를 분석하여 유추할 수 있다.

<header></header>
<nav></nav>
<article>
	<section></section>
</article>
<aside></aside>
<footer></footer>

 

---

 

시맨틱 태그의 종류

header	화면 상단에 위치하여 보통 로고, 로그인, 회원가입 등을 포함한다
footer	화면 하단에 위치하여 보통 이메일, 저작권 표시 등을 포함한다
nav	보통 header 영역의 아래쪽에 위치하며 메뉴를 표현한다
article	하나의 주제에 대해서 그 내용에 대해 설명할 때 사용한다 (ex 뉴스기사, 블로그 글)
section	하나의 주제를 그룹화 할 때 사용한다 (ex 뉴스 기사의 제목)
aside	흔히 사이드바라고 불리는 곳으로 보통 광고, 검색, 카테고리 등을 표현한다

* article과 section은 사용 용도가 비슷함. 회사마다 상이할 수 있다.

 

 

---

 

 

1. header

사이트의 헤더 부분에 사용된다.

<header>
    <h1><a href="/">LOGO</a>
    <nav>
        <h2>글로벌 네비게이션 영역</h2>
        <ul>
            <li><a href="#">menu 01</a></li>
            <li><a href="#">menu 01</a></li>
            <li><a href="#">menu 01</a></li>
            <li><a href="#">menu 01</a></li>
            <li><a href="#">menu 01</a></li>
        </ul>
    </nav>
</header>

 

 

2. hgroup

제목을 묶어 표현하는데 사용한다.

<hgroup>
	<h1>HTML5의 소개</h1>
	<h2>HTML5의 elements에는 다음의 것들이 있다.</h2>
</hgroup>

 

 

3. section

책에서 소제목을 붙여놓는 것을 하나의 섹션화 했다고 하는데

그와 같이 문단 등의 컨텐츠를 하나의 그룹으로 만드는 역할을 한다.

section은 재배포 되어서는 안될 컨텐츠를 지정할 때도 사용. 단순 스타일을 적용하기 위해서는 div를 사용하고 맥락이 비슷한 내용을 그룹핑의 요소로 묶을때만 section을 사용한다.

<section>
    <h3>HTML5 시멘틱 마크업</h3>
    <p>시멘틱 마크업은 의미가 잘 전달 되도록 HTML을 작성하는 것을 말한다.</p>
</section>

 

 

4. nav

nav라는 태그를 사용하면 문서 어디서든 네비게이션이라는 요소를 빨리 파악할 수 있고 구조적으로도 안정적이다.

nav태그는 문서 어디에도 존재 가능한 위치 독립적인 요소다.

어떤 요소 안에도, 독립적으로 위치할 수 있다.

<nav>
    <h2>네비게이션 영역</h2>
    <ul>
        <li>
            <a href="#">1depth menu01</a>
            <ul>
                <li><a href="#">2depth menu01</a></li>
                <li><a href="#">2depth menu02</a></li>
                <li><a href="#">2depth menu03</a></li>
            </ul>
        </li>
        <li><a href="#">1depth menu02</a></li>
        <li><a href="#">1depth menu03</a></li>
    </ul>
</nav>

 

 

5. article

article의 사전적 의미가 '신문 또는 잡지의 기사' 인 것처럼 웹상의 실제 내용을 말한다.

article은 신문기사처럼 문단화 되어 독립적인 문서로서 배포 가능한 문단을 말한다. 검색엔진은 배포 가능한 컨텐츠로 인식한다.

<article>
    <p>기업이 추구하는 가치에 도달하기 위해선 먼저 올바른 전략을 설정하고, 
    이에 부합된 사업전략과 기능전략을 유기적인 관계 속에서 일관되게 추진해야 합니다.</p>
    <section>
        <h1>스피드경영</h1>
        <p>스피드경영에 있어 가장 중요한 것은 ‘Time Line’의 개념입니다. 
        조직 내에서 속도를 저하시키는 최대의 장애 요인인 불분명한 지시와 
        초점 없는 결정, 단선 커뮤니케이션 등을 지양해야 합니다. 
        빠르게 변화하는 경쟁 사회에서 속도는 승자와 패자를 가르는 유일한 변수이기 때문입니다. 
        </p>
    </section>
    <section>
        <h1>변화경영</h1>
        <p>기업환경은 끊임없이 변화하고 있습니다. 
        단지 어디에서 어떻게 그 변화가 영향을 미치고 있는지를 신속하게 
        인식하지 못하는 것 뿐입니다.
        </p>
    </section>
</article>

 

 

6. aside

실제 내용이 담겨지는 영역 외에 기타 부수적인 내용을 담는 영역에 사용된다. 최근글 보기, 다녀간 블로거 보기, 최근 댓글이 달린 글 등 사이드바에 담길만한 내용 등을 담는 곳에 사용된다.

말 그대로 필수 요소가 아니기 때문에 사용하지 않아도 상관 없다.

<section>
    <h1>현대카드 스탬프가맹점이란?</h1>
    <p>스탬프가맹점에서 소정금액 이상 결제 시 자동으로 스탬프가 적립되고, 
    3회 적립시 쿠폰이 발행되는 새로운 신용카드 서비스입니다.
    </p>
</section>
<section>
    <h1>현대카드 스탬프가맹점 이용방법</h1>
    <ul>
        <li>스탬프가맹점에서 소정금액 이상 결제합니다.</li> 
        <li>휴대폰 SMS를 통해 스탬프 적립내역 및 쿠폰내역이 통보됩니다.</li>
    </ul>
</section>
<aside>
	<img src="images/side.jpg" alt="개인정보안심 서비스 신청/문의:1588-3483" />
</aside>

 

 

7. footer

관습적으로 사용되어진 위치를 나타내던 footer가 직접적인 태그명으로 지정되었다.

footer 태그 안에는 어떤 요소든 포함할 수 있다.

- 섹션의 푸터를 나타내고자 저자나 저작권 등을 포함

- 관련문서로의 링크, 저작권 정보, 작성날짜 등을 나타내기도 함.

- 저자나 편집자의 연락처는 footer 안에 address요소로 표현

- 대부분 섹션의 마지막에 위치하지만 반드시 그럴 필요는 없다.

<footer>
	<address>서울시 영등포구 의사당대로 3 현대캐피탈 빌딩 대표이사 정태영</address>
	<p>CopyRight &copy; MRI.inc. All Right Reserved.</p>
	<ul>
        <li><a href="#"><img src="images/twitter.jpg" alt="트위터" /></a></li>
        <li><a href="#"><img src="images/facebook.jpg" alt="페이스북" /></a></li>
	</ul>
</footer>