HTML and CSS Reference
In-Depth Information
but that doesn't feel right, as the subtitle feels like it should be
a heading. An alternate method of marking this up could be
<h1>Metafilter</h1>
<h2>community weblog</h2>
but then every header on the site would need to be
<h3>
to
<h6>
as they're subordinate to the tagline. In HTML5, the subtitle
can be marked up as a heading element but removed from the
document outline, like so:
<hgroup>
<h1>Metafilter</h1>
<h2>community weblog</h2>
</hgroup>
This gives the outline shown in
Figure 2.8
.
The spec for
<hgroup>
says “For the purposes of document
summaries, outlines, and the like, the text of
hgroup
elements
is defi ned to be the text of the highest-ranked h1-h6 element
descendant of the
hgroup
element.”
So:
<article>
<hgroup>
<h2>Get the beers in! Here comes</h2>
<h1>Remy Sharp!</h1>
</hgroup>
</article>
shows the text “Remy Sharp” in the outline, as that's the highest-
ranking heading element in the group.
1. Metafilter
FIGURE 2.8
The outline
shows only “Metafilter” as part
of the outline.
NOTE
We haven't used a
<header>
element in this
<article>
.
<header>
is a
grouping element that collects
together introductory content;
as you only have headings,
already grouped in
<hgroup>
,
there is no need for a further
layer of grouping. It wouldn't be
an error to use it, but it's super-
fl u o u s fl in t h fl s e x a m p fl e .
Sectioning roots
Note that certain elements—
<blockquote>
,
<body>
,
<details>
,
<fieldset>
,
<figure>
,
<td>
—are said to be sectioning roots, and
can have their own outlines, but the sections and headings
inside these elements do not contribute to the outlines of their
ancestors. This is because, for example, you could quote sev-
eral sections of an article in a
<blockquote>
, but those quoted
sections don't form part of the overall document outline.
