html5 시맨틱 태그

html5 시맨틱 태그란?

기존 HTML4에서는 <div>태그를 이용해 화면을 분할하거나 필요한 것들을 모두 넣었지만 HTML5부터 모든 태그에 자신의 역할이 생겼다. 

이 태그들을 시맨틱 태그라 한다.

시맨틱 태그는 "의미가 통하는"의 시맨틱 뜻처럼 문서 구조의 가독성을 높여준다.

1. header

- 머리말(제목) 지정하기

- 사이트 전체의 제목 부분이 될수도, <article>의 제목 부분이 될 수도 있다.

[출처] HTML5와 시맨틱 태그|작성자 insa

[출처] HTML5와 시맨틱 태그|작성자 insa

<header>
    <h1>티스토리</h1>
    <p>티스토리 블로그입니다.</p>
</header>

2. nav

- 문서를 연결하는 내비게이션 링크

- 다른 사이트의 문서로 연결하는 링크를 나타낸다. 위치에 영향을 받지 않는다.

<nav>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
</nav>

3. menu

- 페이지 내 기능을 하는 버튼/링크의 모음(대표적으로는 툴바)을 나타냄.

- type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.

<menu type="toolbar">
    <li>
        <menu label="File">
            <button type="button" onclick="file_new()">New...</button>
            <button type="button" onclick="file_open()">Open...</button>
            <button type="button" onclick="file_save()">Save</button>
        </menu>
    </li>
    <li>
        <menu label="Edit">
            <button type="button" onclick="edit_cut()">Cut</button>
            <button type="button" onclick="edit_copy()">Copy</button>
            <button type="button" onclick="edit_paste()">Paste</button>
        </menu>
    </li>
</menu>

4. hgroup

- 제목과 부제목을 묶어 hgroup에 대한 스타일을 지정하여 문서의 위치 이동을 수월하게 할 수 있다.

- hgroup 태그, HTML5에서 제외(hgroup removed from HTML).2013 4월경 hgroup 태그가 html5에서 제외되었다고 합니다.

링크 참조 : http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/

5. section

- 콘텐츠 영역 나타내기

- <section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있고, 실제 콘텐츠가 들어있는 <article> 태그를 넣을 수도 있다.

<h1>육대주</h1>
<p>지구 위의 여섯 대륙</p>
<section>
    <h1>아시아</h1>
    <ul>
        <li>한국</li>
        <li>일본</li>
        <li>중국</li>
    </ul>
    <section>
        <h1>한국</h1>
        <ul>
            <li>서울</li>
            <li>부산</li>
            <li>광주</li>
        </ul>
    </section>
</section>
<section>
    <h1>유럽</h1>
    <ul>
        <li>프랑스</li>
        <li>이탈리아</li>
        <li>독일</li>
    </ul>
</section>

6. article

- 실제 콘텐츠 내용 넣기

- <section> 태그를 이용해 콘텐츠 영역을 구분해 놓고, <article> 태그를 이용해 내요을 채워나간다고 생각하면 된다.

<h1>My blog</h1>
<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate="" datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there's a microphone anywhere near you, assume it's hot and
    sending whatever you're saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a href="">Show comments...</a>
    </footer>
</article>

7. aside

- 본문 이외의 내용 표시하기

- 양쪽 사이드 바 등을 표시할 때 사용하는 태그이다. 필수 요소는 아니다.

<aside>
    <p>태그는 본문 내용에 대한 추가적인 설명을 할때 사용하는 태그로 본문과 별도로 추가적인 언급을 위해서 사용</p>
</aside>

8. footer

- 제작 정보와 저작권 정보 표시하기

- <footer> 태그 안에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있다.

<footer>
    <p>Copyright 2014 by company. All Rights Reserved.</p>
</footer>