HTML5의 요소 중 글의 아웃라인을 구성하는 섹션 관련 요소는 <section>, <nav>, <article>, <aside>이고, 최상위 섹션 요소는 <body>, <blockquote>, <details>, <fieldset>, <figure>, <td>이다. 헤딩관련 요소는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>이 있다.
최상위 섹션 요소는 자신만의 아웃라인을 가질 수는 있지만 최상위 섹션 요소를 포함하고 있는 아웃라인에는 영향을 미치지 않고 독립적이다.
웹페이지가 블로그라고 가정하고 각 섹션 요소의 용도를 살펴보자면, <nav>는 메인 메뉴에, <article>은 블로그의 엔트리에, <aside>는 사이드 바에 적용할 수 있다.
HTML 5에서는 섹션(section)을 어떻게 지정하는가에 따라서 글의 구조(outline)가 달라진다. 명시적으로 섹션을 구분하지 않은 경우에는 헤딩의 수준과 위치에 따라 암시적으로 섹션이 구분된다. 참고로, <header>, <footer>, <address>등은 섹션을 나누지 않는다.
우선, 아래 2개의 예를 비교해 보도록 하자.
마지막 <h3>를 <section>으로 감싼 경우에 'Grunt'는 'Foo'의 개요에 해당하는 글이 된다.
<body> <h1>Foo</h1> <h2>Bar</h2> <blockquote> <h3>Bla</h3> </blockquote> <p>Baz</p> <h2>Quux</h2> <section> <h3>Thud</h3> </section> <p>Grunt</p> </body>
Bar는 Foo보다 헤딩의 수준이 낮으므로 Foo 아래의 섹션이 된다. 마찬가지로 Bla는 Bar 아래의 섹션이 된다. <blockquote>는 부모 요소의 섹션을 구성하지 않으며, Baz는 Bar에 해당하는 글이 된다. Quux는 Foo보다 헤딩의 수준이 낮고 Bar와 수준이 같으므로 Foo 아래에 Bar 다음의 섹션이 되며, Thud는 명시적으로 섹션을 정의 하였으므로 Foo 아래에 Quux 다음의 섹션이 된다. Thud 다음에 섹션이 닫혔으므로 Grunt는 Foo에 해당하는 글이 된다.
이를 다시글의 개요 형식으로 표현해 보자면 다음과 같이 표현해 볼 수 있다.
1. Foo 1.1. Bar "1. Bla" Baz 1.2. Quux 1.3. Thud Grunt
위의 코드에서 <section>만 제거해 보았다. 이제 'Grunt'는 'Thud'에 해당하는 글이 된다.
<body> <h1>Foo</h1> <h2>Bar</h2> <blockquote> <h3>Bla</h3> </blockquote> <p>Baz</p> <h2>Quux</h2> <h3>Thud</h3> <p>Grunt</p> </body>
1. Foo 1.1. Bar "1. Bla" Baz 1.2. Quux 1.2.1. Thud Grunt
섹션과 헤딩을 어떻게 사용할 것인가. 이제 다음 3 개의 코드를 비교해 보자. 3개의 모두 같은 글의 구조를 가진다.
<body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h6>Sweet</h6> <p>Red apples are sweeter than green ones.</p> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>
위의 코드를 <section>을 사용해서 명확히 표현하면 다음과 같다.
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body>
모두 <h1>을 사용해도 글의 구조는 위와 같다. 다만, HTML5를 지원하지 않는 브라우저에서는 의도대로 보이지 않을 것이다.
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h1>Taste</h1> <p>They taste lovely.</p> <section> <h1>Sweet</h1> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>
<hgroup>를 사용하면 헤딩을 묶을 수 있다. 묶여진 헤딩 그룹은 하나의 헤딩처럼 동작하며, 포함된 헤딩 중 가장 높은 수준의 헤딩과 동일한 수준을 갖게 된다. 마치, 제목 아래에 부제를 붙이는 것과 같다.
P.S.
WYSIWYG 보다는 WYSIWYM!
'프로그래밍 > Web' 카테고리의 다른 글
| jQuery Mobile (0) | 2012.03.31 |
|---|---|
| jQuery Mobile 사용법 (2) | 2011.11.10 |
| 첫번째 핑백 받은 이야기 (2) | 2011.08.19 |
| 미투데이 버튼 그리고 요즘 버튼 (8) | 2011.08.15 |
| QR 코드를 쉽게 만들 수 있습니다. (0) | 2011.08.15 |
