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