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.
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.
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.
3. Demo to explore html5 Structural Elements
2. Basic Structure
1. CSS Presentation
3. Thoughts About HTML5
1. About Steven Bradley
5. 3 Comments
7. Example Sites
8. CSS Layouts
9. Sponsored by
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 tend to think the main content of any page sits at a higher level in in
the hierarchy than the boilerplate content, but that’s not how I structured my HTML according to the algorithm for the HTML5 document outline.
Again the algorithm that produced this outline isn’t in use, but it does make me want to
think more about how we structure content as part of the hierarchy. Should information in a sidebar sit at the same level in the hierarchy as the main content?
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 comment Jordan left on a post about why I don’t use the new HTML5 structural elements in practice.
I may have thought it would be a single post, but something in the universe had other plans. The more I looked at the document outline and the new elements, the more confused I felt and the more research I did to try and clear the confusion.
Comments by Šime 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.
I know many of us like to think we’re always making objective decisions when we design and develop websites, but there’s a lot more
subjectivity in our decisions than we might care to admit.
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.
Any of these approaches is fine. They each have a few tradeoffs that may or may not affect a specific project, but more likely each is used based on the personal preference of the developer.
It will be the same with new elements like section and aside. We’ll need to work with them awhile to develop the patterns we eventually use and there will likely be several common patterns in use across the industry.
Incorporating the New into the Old
I did gain a new appreciation for the value and use of the new elements and I would like to use them more. I had forgotten, but I did use the HTML5 elements when I developed this site’s current design.
I think the easiest way to use the new elements is to
incorporate one or two at time into your work. A few of the new elements do replace a div and class combo you probably use and the new element is meant to work the same way.
We can start by making the following substitutions.