New HTML5 elements

The outline shows I’ve set up each block of content inside the header, footer, and sidebar at an equal level in the hierarchy to the article.

I don’t know, but it’s a good question to ask and think about. If sidebar content should be at a lower level in the hierarchy, it suggests I should find a different way to markup sidebar content. For example changing div class=”sidebar” to aside class=”sidebar” places the sidebar container at the same level in the hierarchy as the article, but the content within the sidebar would be one level lower.

I think you can make a case that this kind of outline makes more sense than the one I created with the structure I ultimately used. On any given page the content of the page should be seen as more important than boilerplate content. Of course, to follow through the rest of the boilerplate would need to be marked up with sectioning elements so header and footer elements wouldn’t make sense.

I’m not sure which is the better structure, but it’s worth thinking about in this context. One of the things I learned these last few weeks is it’s worth spending more time thinking about the structure of our HTML and what it communicates.

What I learned About HTML Writing This Series

I sometimes mention how many posts here come about from my wanting to learn something. This series didn’t start out that way. I began what I thought would be a single post about the HTML5 document outline after a on the first post in this series let me know I’d missed something important about the new elements where assistive devices was concerned. I went back for more research and rewrote much of the series at that point.

All the research and revisions led to a lot of back and forth in how I feel about using the elements and how well I understand them. Both had me wondering if I would use the elements in practice once I concluded the series.

As I reworked the demo and continued to discover more information, particularly the ARIA role definitions, I had a few realizations.

• There is a benefit to using the new elements, which is what they communicate to assistive devices.
• Despite what I still think are somewhat confusing guidelines for their use, if we as an industry use the new elements consistently we’ll give them more standard definitions through our use.
• The structural patterns I currently work with didn’t spring forth overnight. I’ve spent nearly a decade evolving these structures so why should I expect anything different with the new elements.
• A large part of my confusion comes from lack of working with the elements I want to understand. More practice should lead to more understanding.

The structure we choose for our HTML is also subjective. There’s no single right way to structure the HTML for a web page. Different developers will make different decisions that work. Take navigation as an example. I build navigation with an unordered list. Others use ordered lists. Two more common patterns for navigation bars are inline-blocks and CSS tables.