Constructing Content - HTML5 with CSS3 - page 80

Listing 4-8. Headings within section s
<h1>Costume Accessories</h1>
<p>All the trappings and trimmings.</p>
<section>
<h1>Masks and Cowls</h1>
<p>Protect your secret identity.</p>
<section>
<h1>Masks</h1>
<p>Facial coverage.</p>
</section>
<section>
<h1>Cowls</h1>
<p>Head coverage.</p>
</section>
</section>
This works because each sectioning element constitutes a new sectioning root, effectively starting a new
chain of command in the ranked headings. This nesting of sectioning elements still forms a hierarchical
outline even though all four headings are the same element; their rank is implied by the document tree,
with each section being a subsection of its parent.
However, older browsers—and some current browsers—will render all of these h1 elements at the same
size by default. The semantic hierarchy will still be there in the markup, but there will be no visual
hierarchy, at least not by default in those browsers. Rather than rely exclusively on default browser styles
to establish the sizes of ranked headings, you can use your own CSS to style these nested section
headings proportionally, as we'll show you later in this chapter.
Always choose a heading element of the appropriate rank for its importance and position in the outline.
The first heading in any sectioning element should be the highest-level heading for that entire section. If
you begin an article with an h3 , that heading acts as the title for the entire section of content so it should
be the only h3 in that article .
Required Attributes
There are no required attributes for heading elements.
Optional Attributes
Heading elements don't offer any optional attributes.
hgroup
The hgroup element can contain a group of headings ( h1 to h6 ) that together act as a heading for a
section of content. The highest-level heading in an hgroup is taken as the heading for the section, and any