HTML5에서 구조를 위한 태그

HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 <div>를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다.

출처: http://m5designstudio.com/2013/orlando-web-design/html5-for-beginners-2/

SECTION

<section> 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나누기도 한다. 주로 제목과(h) 함께 사용한다. 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 문서 구조상 특별한 의미가 없는 <div>를 사용해야 한다. 항상 section은 연관된 콘텐츠를 위해 사용하도록 하자.

HTML

<article>
    <h1>오늘의 할일</h1>
    <section>
        <h1>아침에 할일</h1>
        <p>밥먹고 운동하기</p>
    </section>

    <section>
        <h1>점심에 할일</h1>
        <p>운동하고 밥먹기</p>
    </section>
</article>

하나의 섹션 안에서는 그 섹션이 전체 문서 구조에서 가지는 단계와 상관없이 <h1>을 사용할 수 있다.

NAV

<nav> 문서의 글로벌 내비게이션이나 사이드 내비게이션등 페이지의 이동을 위한 내비게이션을 위해 구성된 섹션을 나타낸다. 페이지 안에 있는 모든 링크의 그룹이 nav로 기술될 필요는 없으며 주요 내비게이션 링크들만 묶어주는 것이 좋다.

HTML

<nav>
    <h1>메인 내비게이션</h1>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
    </ul>
</nav>

nav는 꽤 자주 <header> 안에 위치하게 된다.header가 '내비게이션을 돕기 위해' 사용된다는 점을 고려해 보면 이는 더욱 명백해진다.

ASIDE

<aside>는 주된 본문 콘텐츠 흐름과 관련없는 인접한 콘텐츠에 사용한다. 관련 사이트 링크나 광고, nav 요소의 그룹, 메인 콘텐츠와 별도의 내용이라고 생각되는 콘텐츠에 사용하도록 하자.

ARTICLE

<article>은 문서, 페이지, 애플리케이션, 사이트 안에 들어가는 독립적으로 구성할 수 있는 컴포넌트로 별도로 배포하거나 재사용하기 위한 구조이다. article은 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알수 있는 콘텐츠를 담으면 된다.

HTML

<section>
    <article>
        <h1>제목</h1>
        <p>본문</p>
    </article>
</section>

article 요소안에 article 요소가 들어갈 경우, 밖의 article 요소의 내용과 안쪽의 article 요소의 내용이 관련이 있는 내용이라는 것을 의미한다.

HTML

<article>
    <header>
        <h1>HTML5 구조</h1>
        <p>Published On <time datetime="2013-01-22">2013년1월22일</time></p>
    </header>
    
    <p>본문 내용</p>

    <footer>Posted in unclepapa</footer>

    <article> <!-- 코멘트 시작 -->
        <header>
        작성자:<a href="">나그네</a> at <time datetime="2013-01-22T08:45">2013년1월22일 08:45</time>
        </header>
    
        <p>코멘트 내용</p>
    </article> <!-- 코멘트 끝 -->

</article>

HEADER

<header>는 소개나 내비게이션 기능들의 묶음을 나타낸다. 보통 문서나 section의 최상단에 나타나지만, 꼭 그래야 할 필요는 없으며 여러번 사용 가능하다. 또, 한 섹션의 목차나 검색폼, 관련 로고등을 감싸는 용도로 사용할 수 있다.

FOOTER

<footer>는 페이지를 만든 사람, 저작권 정보, 연관된 콘텐츠에 대한 링크, 블로그의 포스트의 작성자, 발행일시등에 쓰인다. 이 요소는 가장 가까운 선행하는 섹션의 푸터를 의미한다. 저자나 편집자의 연락처는 footer 안의 <adress>로 표현되며 저작권은 <small>로 표현된다.

HTML

<footer>
    <adress>unclepapa@daum.net</adress>
    <small>&copy unclepapa</small>
</footer>

출처: http://webdir.tistory.com/86 [WEBDIR]