HTML and CSS Reference
In-Depth Information
<article>
has started a new section. Using
<section>
,
<nav>
, or
<aside>
instead of
<article>
does the same thing, as they are
all sectioning content.
In fact, it doesn't matter what level of heading you use here;
the outlining algorithm cares about nesting and relative levels,
so this code
<h3>Hello</h3>
<article>
<h6>World</h6>
</article>
produces exactly the same result as Figure 2.6.
Yo u m i g h t b e s a y i n g , “ S o w h a t . W h a t ' s t h e u s e f o r t h a t ? ” W e l l ,
firstly, it means you're not restricted to six levels of headings, as
you are in HTML 4. A heading element nested inside seven lev-
els of
<section>
,
<article>
,
<nav>
, or
<aside>
(or any combina-
tion of them) becomes a logical
<h7>
element (however, unless
you're marking up legal documents or some other horrors, you
should reconsider your content if you need so many levels).
Another advantage is with syndication. Suppose Remy posts an
article:
<article>
<h1>What I did on my holiday</h1>
<p>I went to Narnia. I was bitten by a trilobite. Then I
¬ came home.</p>
</article>
From TBL '91 to XHTML 2 to HTML5
All very newfangled, isn't it? Well, no; the idea that logical headings
should depend on their nesting in <section>s was first floated in 1991
by Sir Tim Berners-Lee himself:
“I would in fact prefer, instead of <H1>, <H2> etc for headings . . .
to have a nestable <SECTION>..</SECTION> element, and a generic
<H>..</H> which at any level within the sections would produce the
required level of heading.”
For some reason this didn't make it into HTML. It was revived for
XHTML2 and re-revived by HTML5, but without an <h> element—
for backwards-compatibility reasons, <h1> to <h6> are used instead.
