- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 355字
- 2025-03-31 04:45:45
Applying the outline algorithm
Luckily for us, HTML5 now has a method of assembling an outline of our pages in browsers, so search engines as well as accessibility technologies can make better sense of them. We're going to make use of the HTML5 Outliner at: http://gsnedders.html5.org/outliner
Getting ready
To use the HTML5 Outliner, we can use HTML stored on our local computer or code visible via a URL. Make sure to save the code we've been creating locally or upload it to a publicly accessible web server for this step.
How to do it...
Let's make sure to save this document either on a local hard drive or remote server. We'll visit http://gsnedders.html5.org/outliner to create our outline.
Using our previous code example, we can generate the following code outline:
- Roxane is my name.
- Untitled Section
- About
- Work
- Contact
- What I'm Reading
- Elsewhere
- All rights reserved. Copyright Roxane.
How it works...
"It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk." - WHATWG
There's more...
It's assumed that content following any heading is related to that heading. Therefore we can use many of the new HTML5 tags like <section> to explicitly demonstrate the beginning and ending of related content.
Are you sure?
If the HTML5 Outliner tool displays messages like "Untitled Section" you should rethink how you're using each of your tags and ensure your approach matches the intent of the specification.
An exception
"Untitled Section" messages should be treated as warnings instead of errors. While <section> and other new HTML5 tags require a heading tag, it's perfectly valid not to have one for <nav> areas.
See also
The http://html5doctor.com site is a terrific interactive reference written by seven thought leaders including Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.