HTML5 Structural Elements — Series Wrap Up

For the last month and a half I’ve been trying to better understand how to work with the new HTML5 structural elements with some degree of success as well as failure. Now that the series is done, what did I learn?

I’ve talked about the document outline, the definitions of the new elements along with the definitions of the ARIA roles each maps to, and then I offered a demo and explained my choices for using and not using the new elements. If you missed any of the previous posts, here’s the entire series to this point.

• HTML Structural Elements And The Document Outline
• The HTML5 Document Outline
• HTML5 Structural Elements — Sectioning Elements
• HTML5 Structural Elements — Non-Sectioning Elements
• HTML5 Structural Elements — How I Built This Demo: Part 1
• HTML5 Structural Elements — How I Built This Demo: Part 2
• HTML5 Structural Elements Demo

This is the last post in the series. When I started the series I’d characterize myself as something of a hostile witness to these new elements. I didn’t expect to find any reason to use them beyond this series.

I was wrong and I thought I would conclude the series by sharing what I learned working on it and how I plan to incorporate the new sectioning and non-sectioning elements in my work.

Document Outline

When I finished the demo I thought why not check what the HTML5 document outline would be. I know it’s not in use anywhere, but I was curious and thought I’d take a look and see if I could learn anything. I ran my HTML through one of the outliners and here’s the outline that was returned along with the elements that create each new section.

[code type=html]
1. Document
1. Section

2. Navigation