본문으로 바로가기

[HTML5] 5장 문서 구조

category 웹코딩/HTML 2013. 2. 8. 00:00

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

섹션화 콘텐츠(sectioning contents)

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

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

섹션 제목

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

hgroup

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

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

아웃라인(outline)

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


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

섹션화 루트(sectioning roots)

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

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

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

  • 아웃라인과 상관 없는 범위를 지정할 때는 <div> 요소를 사용할 것
  • 섹션 요소를 사용할 때는 항상 아웃라인을 염두에 둘 것
  • <article> 요소를 사용 여부는 해당 콘텐츠를 페이지에서 분리해 사용할 수 있는가에 따라 결정
  • <aside>는 없어도 문제 없을 섹션에 사용

'웹코딩 > HTML' 카테고리의 다른 글

[HTML5] 6-2장 멀티미디어 태그  (3) 2013.02.09
[HTML5] 6-1장 새로운 태그  (0) 2013.02.09
[HTML5] 4-2장 HTML5 기본 템플릿  (2) 2013.02.07
[HTML5] 4-1장 구조를 위한 태그  (3) 2013.02.07
[HTML5] 3장 HTML5 소개 및 특징  (6) 2013.02.06