Understanding HTML5 structure and outline algorithm

First thing to remember when we talk about HTML5 is that it’s still experimental. What does it mean? It means that specification can change in any moment. Sometimes it can be just cosmetic changes or clarification but you need to keep that in mind. Of course that doesn’t mean that you can’t use it.

When I first tried to understand new elements – I will not lie – I couldn’t quite understand when to use some of them. But when I started reading W3C HTML5 spec I was happy to see that HTML finally have some logic. It’s not only, let’s be honest, meaningless elements like <div> or <p> but there is <nav>, <aside>, <header>, <article>, <section> that are important to understand how and when to use them. AND some elements don’t need unnecessary attributes anymore. Yay.

I think, it’s gonna be a while until people will stop “not” thinking when they create their html structure, to really think through how they wanna do it and which element is appropriate. Before HTML5 the only planning we had to do was how to nest <div> elements so we could style them with CSS and what should be in <h1> tag. Of course there are attributes that we shouldn’t forget or we should thinking about. But not everyone would remember to use them if they weren’t in best practice for SEO. Anyway, with HTML5 in our doorsteps, it’s time to think about structure and semantics first and then about those divs and CSS.

The main thing to remember when we create our structure, is that there is something called the document outlining algorithm. html5doctor.com already explained it in the “Document Outlines” article, and of course, there is proper section in specification. If you want structure to be logical you can’t forget about it. Besides there are many people who use this information, e.g. using screenreaders. So it is really important to properly use headings for outline. If you don’t understand why, you should see “Importance of HTML Headings for Accessibility“.

Now. You can read definitions of every element in specification (that should be always your first steps). Also html5doctor.com has really great resources. When I read about new elements in HTML5, how to use them, when and how they affect this outlining thing, I decided to visualise it a bit. In “HTML5 and its three faces” sheet/infographic or whatever you call this, is shown how diffrent parts of page are related (nested) to each other and how they affect the outline. But that’s not all. When I created the source code for this HTML5 dummy example, I wrote some information next to the specification of some HTML5 elements. Maybe they will be useful to someone. Warning. They are my notes. They are a little bit like guidelines. If anyone have some suggestions or finds error, please let me know.

Download HTML5 and its three faces sheet