HTML and CSS Reference
In-Depth Information
HTML5 has a tightly defined 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.
A word of warning: 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/
,
which has been wrapped as a Chrome exten-
sion from the same URL, and as an Opera extension at
https://
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 t of
know when to use
<section>
,
<aside>
, or
<div>
.
One major departure from HTML 4, and an important concept
to grasp before you proceed, is that certain HTML5 elements—
<article>
,
<section>
,
<nav>
, and
<aside>
—are sectioning con-
tent, 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
http://gsnedders.html5.org/outliner/
,
as no browser cur-
rently has 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>
The presence of sectioning content has 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
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>
.
