HTML and CSS Reference
Figure 3-4. Flowchart for determining the section header and footer elements
Viewing HTML5 outlines
Now that we have a skeleton of a simple site, let's view the outline! There is a great tool
and returning an outline. Head over to http://gsnedders.html5.org/out-
liner/ where you can upload HTML, enter a URL to parse, or enter the HTML dir-
ectly into a web form. After hitting the “Outline this!” button, you'll be presented with
an outline of the sections in the HTML document you supplied. Try entering the code
tool is a great way to learn the nesting structure of sectioning content.
If you'd prefer to have a tool built into the browser, there is a Google Chrome
extension available from the Chrome Web Store. Go to ht-
tps://chrome.google.com/extensions/ and search for HTML5 Outliner .
The extension installs in the address bar. When visiting an HTML5 web page, the exten-
sion can be clicked to show the page's outline ( Figure 3-6 ). Unfortunately, this does not
work for web pages you are viewing locally.
Opera has an equivalent extension at https://addons.opera.com/addons/
Additionally, if you visit the HTML5 Outliner project at ht-
tp://code.google.com/p/h5o/ , you will find an experimental add-on for Fire-
fox and a bookmarklet that has been tested in Firefox and Opera (there is a link to the
Chrome extension there as well, as this is the project that developed that extension).