HTML and CSS Reference
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
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:
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:
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.
FIGURE 2.5 A simple outline.
FIGURE 2.6 A document
outline after <div> is replaced
by <article> .