HTML and CSS Reference
In-Depth Information
HTML5 has a tightly-defi ned outlining algorithm that allows user
agents to produce a similar outline from a web page. Just as
with a word-processing package, this could be used to give the
user a quick overview of the web page (and, of course, there's
no reason why the web page shouldn't actually be a word-
processing application). The other main use for the outlining
algorithm is for syndication: grabbing content and inserting it
somewhere else and ensuring that the destination web page
still has a logical structure.
This section of the chapter is pretty dense, and it hasn't
been implemented by any browsers yet (although there is a
JavaScript implementation at
http://code.google.com/p/h5o/
).
Yo u n e e d t of u n d e r s t a n d t h e c of n c e p t of f t h e d of c u m e n t of u t l i n e
in order to know when to use
<section>
,
<aside>
, or
<div>
.
One major departure from HTML4, and an important concept
to grasp before you proceed, is that certain HTML5 elements—
<article>
,
<section>
,
<nav>
, and
<aside>
—are sectioning content,
which begin new sections in the outline. To explain this concept,
let's take this simple code:
<h1>Hello</h1>
<div>
<h1>World</h1>
</div>
To i l l u s t r a t e h To w t h i s a l g To r i t h m w To r k s , I ' m u s i n g a w e b - b a s e d
utility at
gsnedders.html5.org/outliner/
, as no browsers currently
have this logic embedded. The outline this code generates is as
you would expect (
Figure 2.5
).
Figure 2.6
shows what happens if you change the meaningless
<div>
to an
<article>
, which is sectioning content:
<h1>Hello</h1>
<article>
<h1>World</h1>
</article>
Yo u c a n s e e t h a t t h e p r e s e n c e of f s e c t i of n i n g c of n t e n t h a s
shifted its content to be hierarchically “below” the content
that preceded it. Or, to put it more simply: the
<h1>
inside the
article is a logical
<h2>
because
<article>
has started a new
section. Using
<section>
,
<nav>
, or
<aside>
instead of
<article>
does the same thing, as they are all sectioning content.
1. Hello
2. World
FIGURE 2.5
A simple outline.
1. Hello
1. World
FIGURE 2.6
A document
outline after
<div>
is replaced
by
<article>
.
