Thursday, 28 February 2013

Modifying the Document Outline | HTML5

Modifying the Document Outline

Problem
You have a primary page title and tagline marked up with headings (h1 and h2, respectively), but you don’t want the tagline included in your document outline.
Solution

Contain the both headings with the hgroup element:
<hgroup>
<h1>HTML5, for Fun &amp; Profit</h1>
<h2>Tips, Tricks and Resources</h2>
</hgroup>

Discussion

hgroup hides all headings, except the highest ranked, from the document outline. In the above example, the only content that would appear in the document outline is “HTML5, for Fun & Profit” from the h1.
Even reversing the source order of the two headings still only pulls the highest ranked h1 content into the document outline:
<hgroup>
<h2>Tips, Tricks and Resources</h2>
<h1>HTML5, for Fun &amp; Profit</h1>
</hgroup>

No comments: