Constructing Content - HTML5 with CSS3 - page 82

Optional Attributes
The hgroup element has no optional attributes.
Outlines and Sectioning Roots
A well-structured HTML document should form an orderly outline, organized from the top down in a
hierarchy of headings, just like you probably learned when you wrote your first book report. For any given
document, the outline begins at the highest-level heading (usually an h1 ) and descends from there. To
begin a new subsection under that heading, simply introduce it with a heading of the next lower rank; if you
begin with an h1 , follow it with an h2 . Use lower-ranking headings for each subsection, creating a
hierarchy from h1 all the way down to h6 .
User-agents can follow a standard outlining algorithm to find all the headings in a document and
automatically generate an outline, which might look something like this:
1. Costume Accessories
1.1 Masks and Cowls
1.1.1 Masks
1.1.2 Cowls
1.2 Belts and Pouches
1.2.1 Belts
1.2.2 Pouches
1.3 Gloves and Bracers
1.3.1 Gloves
1.3.2 Bracers
Before HTML5, such an outline was formed only by the h1 through h6 elements as they occurred in the
body element (and in many cases it still works that way in HTML5). Sections of content were merely
implied by the headings, and any and all content that came after a heading was assumed to belong to that
heading, whether or not the text itself actually related to the subject. This can make it hard to maintain a
logical outline while still using appropriate markup that serves the content. Look at the markup in Listing 4-
10, for example.
Listing 4-10. A sequence of ranked headings
<h1>Superhero Costume Basics</h1>
<p>Battle for justice in comfort and style.</p>
<h2>Unitards and Leotards</h2>
<p>Freedom of movement with a sleek profile.</p>
<h2>Capes and Cloaks</h2>
<p>For timeless majesty or ominous mystery.</p>
<p>We do tailoring and alterations, too! Fittings are
by appointment only, so please call ahead.</p>