28 Chapter 2—Structure and Semantics for Documents
article, aside, nav, and section—and heading content, such as h1 to h6 or
hgroup, which provides the proper entries of the outline.
If we check our HTML5 blog with Geoffrey Sneddon’s online HTML5 Outliner
(http://gsnedders.html5.org/outliner), we see the following structure:- The HLML5 blog!
- Link Block
- Questionnaire
- Login
- Quick Links
- Tug of war between W3C and WHATWG enters ...
- Navigation
With the italicized entries Link Block and Navigation, we get back exactly those
two headings that were hidden in the layout with display: none. If we had omit-
ted these headings completely, we would have seen the text Untitled Section in
their place. But this way, the structure is complete and the outline is much easier
to read.
Regarding the choice of headings h1 to h6, we should note the following: In prin-
ciple, any sectioning content can start with the heading rank h1, but it does not
have to. In our case the heading ranks reflect the hierarchy in the outline: h1 for
the blog header; h2 for the article title, the link block, and the footer navigation;
and h3 for the other headers. If we tagged everything with h1, we would get the
same outline, but the layout would suffer somewhat and we would need to sort
it out manually in the CSS file.
When using hgroup, you need to remember that the outline only includes the
highest level in the hgroup. That is why you cannot see the subtitle Tips, tricks &
tidbits for today’s web developers in the outline.
Even if there is as yet no browser that directly uses the outline algorithm in any
form, this does not mean that it could not play a more important role in the
future. Automatically generated navigation bars would be a possibility, or the
creation of short, concise summaries, or perhaps improvements for crawlers ex-
tracting relevant content for search engines. Until then it definitely does not hurt
to do some serious thinking about the structure of your document. It is easy to
check the structure, so why not go ahead and do it?2.6 Figures with “figure” and “figcaption”
The elements figure and figcaption do not really count among the structural
elements, but they are still a welcome addition to our options in structuring the
integration of independent pictures, graphics, diagrams, and code lists. Each