Heading은 문서에서 새로운 섹션(new section)이나 하위 섹션(sub-section)의 시작을 정의 할 때 완벽하게 효율적인 접근이지만, 더 명확하고 정확한 의미 구조(semantic structure)를 확립하기 위해 잘못 사용될 수 있는 여지가 있습니다.
div 엘리먼트는 주로 CSS를 걸 수 있는 스캐폴딩(scaffolding)으로 사용되는 섹션을 포함하는 데 사용할 수 있지만 큰 의미는 없습니다. 단면 처리(sectioning)에는 기사(articles), 머리글(headers), 바닥 글(footers) 및 내비게이션(navigation)과 같이 페이지의 특정 부분을 정의하는 데 사용할 수 있는 몇 개의 태그가 포함됩니다.
Articles과 Sections
article 요소는 독립형 콘텐츠 섹션을 마크업하는 데 사용할 수 있습니다. 예를 들어 블로그 게시물을 기사로 생각하거나 많은 기사가 담긴 전통적인 신문 페이지를 복제하는 경우 여러 번 생각하면 이 작업은 한 번만 사용할 수 있습니다.
섹션 요소는 보다 일반적인 섹션을 나타내며 예를 들어 기사를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.
<article>
<section id="intro">
<p>[An introduction]</p>
</section>
<section id="main_content">
<p>[Content]</p>
</section>
<section id="related">
<ul>
<li><a href="that.html">That related article</a></li>
<li><a href="this.html">This related article</a></li>
</ul>
</section>
</article>div가 이러한 분리를 만드는 데 사용될 수 있지만 ( 또는 스타일링을 위해 이러한 구분이 필요하지 않은 경우에도 ) 훨씬 풍부하고 의미 있는 문서를 제공합니다.
Caution: HTML5 사양은 각 섹션의 시작 부분에 h1 요소를 사용할 수 있음을 제안합니다. 이 요소는 해당 섹션 앞의 모든 항목의 하위 제목이 됩니다. ( 위의 예에서 h1이 오프닝 article 태그 바로 다음에 오는 경우 html은 오프닝 섹션 태그 바로 다음에 해당 초기 h1의 하위 제목이됩니다.)
그러나 이 나사는 이전 버전과의 호환성을 보장하지 않으며 이를 이해하지 못하는 사용자 에이전트 (스크린 리더 포함)는 제대로 구조화된 제목 수준을 적용하지 않습니다. 섹션을 사용하지 않았다면 사용할 표제 수준을 고수하는 것이 좋습니다. (예 : 섹션 1과 관계없이 h2 등). 이것은 무엇인가를 망가뜨리거나 의미 나 의미를 손상시키지 않습니다.
Headers와 Footers
머리글(Headers)과 바닥 글(Footers)은 보다 전문화되고 자체 설명이 가능한 섹션을 제공합니다.
<body>
<article>
<header>
<h1>Alternatively…</h1>
<p>[An introduction]</p>
</header>
<section id="main_content">
<p>[Content]</p>
</section>
<footer>
<p>[End notes]</p>
</footer>
</article>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>바닥 글(Footers)은 포함되어있는 섹션의 꼬리말입니다. 위의 예에서 첫 번째 바닥 글은 집필의 바닥 글이고 두 번째 바닥 글은 페이지의 바닥 글입니다.
Asides
Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.
<section id="main_content">
<h1>Tixall</h1>
<p>[All about Tixall]</p>
<aside>
<h2>Tixall Obelisk</h2>
<p>[A short note about Tixall Obelisk]</p>
</aside>
<p>[Maybe a bit more about Tixall]</p>
</section>Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.
우리가 이 구조에 집중하는 동안,
figures를 포함 시키려면, 그 일을하기위한 두 개의 태그가있을 수 있습니다.
<figure>
<img src="pictures.jpg">
<figcaption>My Birthday Party</figcaption>
</figure>img 요소는 alt 속성이 필요 없다는 것을 명심하십시오. figcaption (맞춤법이 필요한 경우 “figure caption”)이 해당 작업을 수행하면됩니다.
Navigation
마지막으로 내비게이션 링크 그룹을 마크업하는 데 사용되는 nav가 있습니다.
<nav id="main_nav">
<ul>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/techniques/">Techniques</a></li>
<li><a href="/examples/">Examples</a></li>
<li><a href="/references/">References</a></li>
</ul>
</nav>Note: 이는 또한 페이지 내 내비게이션 (<a href=”#overthere”> … 등)에도 사용될 수 있지만 모든 그룹 링크에 필요하지는 않으며 주요 그룹으로 설계되었습니다. 예를 들어, 저작권(copyright), 저자(author) 및 연락처 링크(contact link)는 바닥 글 요소(footer element)에 단독으로 배치할 수 있습니다.
Caution: 이러한 새로운 HTML 5 요소의 스타일을 지정하려면 (예 : <div id = “content”> … 등을 사용하는 것보다 훨씬 낫습니다) 이전 버전의 브라우저, 특히 Internet Explorer에서 문제가 발생할 것입니다 버전 8 이하는 이러한 태그를 이해하지 못합니다. 그러나 HTML5 Shiv가 문제를 해결할 수 있습니다. head 부분에 삽입 된 작은 Javascript로, 브라우저를 새로운 HTML 5 태그를 사용할 수 있도록 CSS의 다양한 속성까지 스타일을 지정할 수 있습니다.
