HTML and CSS Reference
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
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:
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.”
<h2>Get the beers in! Here comes</h2>
shows the text “Remy Sharp” in the outline, as that's the highest-
ranking heading element in the group.
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 .
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.