Constructing Content - HTML5 with CSS3 - page 79

Headings always require both a start tag and an end tag. They fall under their own content model—
heading content—but are also flow content, and can occur wherever flow content is allowed. Headings can
only contain text or phrase elements.
Figure 4-2 shows the previous markup as rendered by a browser with default styling. Graphical web
browsers will automatically display headings in a boldfaced font and at different sizes for each level, h1
being the largest and h6 being the smallest, establishing a visual hierarchy to match the semantic
hierarchy.
Figure 4-2. Different heading levels appear at different font sizes by default
Because of their default styling, headings have often been abused for their presentational effects. Avoid
this mistake and use headings in a meaningful way. An h2 is “the second-most important heading,” not
“the second largest font.” You can use CSS to alter the default appearance of headings, including their font
size.
Prior to HTML5 and the new sectioning elements, a document's body acted as the sole sectioning root,
forming an outline based only on the hierarchy of its headings. This meant that, if you followed good
semantics, only a single h1 would occur per document (often reserved for the site's name or page title),
and all other headings on the page ranked below that. It can be difficult to maintain an orderly outline
under such circumstances, and if any heading breaks rank—an h4 following an h2 , for instance—it could
throw off the entire document outline.
But in HTML5, the first child heading within a sectioning element acts as the main heading for that entire
section, effectively starting a new hierarchy within that section alone. Now it can be rightly sensible to
include multiple h1 s in a document, but you should still have only a single h1 per section. Though it might
look odd, the markup shown in Listing 4-8 is completely valid and semantically appropriate because each
top-level heading marks the beginning of a new section element.