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
The css file mentionated on the picture exists? Wonder if I can download this file to. Tks.
No, sorry. Even if there was, it has been >7 years since I’ve created this and the file itself is probably lost with my old PC ;o)
1. I read out this article, but there is no any difference between div and section. If i use heading in div, and jaws reading fine same as section. Could you please give one best example for above differences in development context.
very descent structural explanation of HTM5, I was looking for such presentation for long time. Thanks and keep it up
woouww!! very nice web page, I like the canvas toons ;-D on top.
sorry my english is not to good.
and very interesting inf about tags…they never finish html5
It was ME! I'm the hero ;-)
"artwork & site design by Field5"
Cool blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your design. Kudos
Thank you for such a fantastic web site. On what other blog could anyone get this kind of information written in such an insightful way? I have a presentation that I am just now working on, and I have been looking for such info.