[HTML5] 5장 문서 구조

HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다.

해당하는 요소 : <article>, <aside>, <section>, <nav>

헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더와 아웃라인을 가지게 된다. 구조를 나누는 의미 요소

섹션에는 각각 하나의 제목을 지정할 수 있으며 섹션 내부에 제목이 2개 이상이 있을 경우, 암묵적으로 해당 섹션이 나누어 지거나 하위 섹션을 만든다. HTML5에서 크게 바뀐것 중 하나가 섹션이 다르면 같은 수준의 제목을 사용할 수 있다는 것이다.

hgroup 요소는 HTML5 사양에서 더 이상 존재하지 않습니다. 폐기되었어요!!

<hgroup> 요소 안에 <h1>~<h6>를 포함하며, 여러개의 제목을 하나로 취급한다. 섹션안에 제목과 부제목이 있을 경우 유용하며 hgroup의 수준은 안에 포함된 제목 요소중 가장 높은 것과 동급이 된다.

문서 구조는 눈에 보이지 않기 때문에 까다롭게 느껴질 수 있는데 http://gsnedders.html5.org/outliner 웹 서비스를 이용하면 문서구조를 간편히 확인할 수 있다.

매번 페이지를 방문하기 귀찮다면 크롬사용자라면 관련 부가기능을 설치하면 된다. 바로가기

해당하는 요소 : <blockquote>, <fieldset>, <td>, <figure>, <details>, <body>

문서 구조에서 각기 영역을 갖지만 안에 들어있는 헤딩과 섹션영역은 문서 구조에 잡히지 않는다.

※ 아웃라인을 의식한 마크업

WEBDIR