[HTML5] HTML5 시멘틱 구조 태그

HTML5 시멘틱 구조 태그

<header>

이 요소는 웹페이지 일부분의 머리글을 정의하는데 사용되며 전체 페이지에서는 <article> 요소나 <section> 요소를 사용한다.

<nav>

이 요소는 웹페이지의 기본 탐색 링크를 위한 컨테이너이다. 링크로 구성된 모든 그룹에는 이 요소를 사용하지 말아야하며 주요 탐색 블록에만 사용해야 한다. <footer> 요소에 탐색 링크가 있는 경우에는 <footer> 요소만으로도 충분하므로 <nav> 요소로 이 탐색 링크를 둘러쌀 필요가 없다.

<aside>

제목과 부제가 모두 있는 경우에는 페이지, 기사 또는 섹션에 둘 이상의 표제가 필요할 수도 있다. 예를 들면, 본 튜토리얼에는 제목과 부제가 있으며 각각 "HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기"와 "HTML5로 canvas와 video 요소 구현하기"이다. 주제와 부제에 각각 <h1> 요소와 <h2> 요소를 사용하여 <hgroup> 요소로 둘러쌀 수 있다.

<hgroup>

이 요소는 새로 추가된 것으로 사이드바 주변에 있는 컨텐츠와는 별도로 다루어야 하는 기타 컨텐츠와 사이드바를 마크업하는 데 사용한다. 이러한 예로는 광고 블록이 있다.

<section>

이 요소는 문서나 애플리케이션의 섹션, 즉 기사나 튜토리얼의 장 또는 섹션을 나타낸다. 예를 들면, HTML5에서는 독자가 현재 읽고 있는 섹션이 <section> 요소로 둘러싸인다. 반드시 그런 것은 아니지만 일반적으로 <section> 요소에는 머리글이 있다. 예를 들면, 현재 읽고 있는 섹션의 머리글에는 "시맨틱 요소"라는 텍스트가 포함되어 있다.

<article>

<article> 요소는 뉴스항목, 블로그 포스트 또는 설명과 같이 자체적으로 배포될 수 있는 페이지에 있는 개별 항목을 정의하는 데 사용된다. 이러한 항목은 일반적으로 RSS 피드를 사용하여 신디케이트된다.

<footer>

<header> 요소와 마찬가지로 이 새 요소는 페이지 일부분의 바닥글을 정의한다. 페이지나 기사, 섹션의 끝에는 바닥글이 있어서는 안되지만 일반적으로는 그렇게 한다.