Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

2.5 The Outline Algorithm

Even if the details for outlining a document sound rather complicated in the specification, there is a simple idea behind outlining, which is a machine-readable summary of the underlying document structure. This structure is determined by a combination of so-called sectioning content—for example, body, 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:

1. The HLML5 blog!
   1. Link Block
      1. Questionnaire
      2. Login
      3. Quick Links
   2. Tug of war between W3C and WHATWG enters ...
  3. 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 omitted 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 principle, 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 extracting 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?

  • + Share This
  • 🔖 Save To Your Account