Recognizing Semantics - HTML5 Mastery: Semantics, Standards, and Styling - page 109

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
built by Geoffrey Sneddon ( http://gsnedders.com ) for parsing HTML5 markup
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
we've been building. You should see an outline like Figure 3-5 . Experimenting with this
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/
extensions/details/html5-outliner/ .
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).