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
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:
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 , 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:
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> .
Search WWH ::

Custom Search