Text - Introducing HTML5 - page 35

such as “Most popular posts” or “Recent comments,” but you
probably don't want a heading on your main site <nav> that just
says “Navigation.”
Therefore, if you see “Untitled Section,” don't automatically
assume that you should put a heading there. Treat it as a warn-
ing, not an error.

<hgroup>
Sometimes you have a heading and a subheading, or tagline.
Slashdot uses “News for nerds, stuff that matters”; dev.opera
has “Follow the Standards. Break the Rules”; Metafilter is a
“community weblog.” How do you mark up those taglines?
In HTML 4, you could use
<h1>Metafilter</h1>
<p>community weblog</p>
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 defined to be the text of the highest-ranked h1-h6 element
descendant of the hgroup element.”
So:
<hgroup>
<h2>Get the beers in! Here comes</h2>
<h1>Remy Sharp!</h1>
</hgroup>
shows the text “Remy Sharp” in the outline, as that's the highest-
ranking heading element in the group.

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's no need for a further
layer of grouping. It wouldn't be
an error to use it, but it's super-
fluous in this example.

1. Metafilter

FIguRE 2.8 The outline
shows only “Metafilter” as part
of the outline.