There’s this great tool I’ve been using lately to check my HTML5 structures and assure myself that all the new elements have been placed correctly and have the necessary headings.
HTML5 requires all the new structural elements to have a heading, now if you’re meeting situations where a heading does not have its place at the beginning of an element, content-wise, then still have it placed and just hide it via the display CSS property.
To get a better look at this, we’ll use this sample HTML5 page I found online located at deltabluesmedia.com. As for the HTML5 outliner, there are various solutions and scripts out there, I personally chose http://gsnedders.html5.org/outliner/ as it lets me upload a page, insert an URL or paste my code. Go ahead and check deltabluesmedia.com using the URL input and outline it!
- 1. Sample HTML5 Structure
- 1. Untitled Section
- 2. Main Section
- 1. Untitled Section
- 2. Untitled Section
First thing to notice, it gave us a great looking hierarchical structure of the document by following the new HTML5 structure elements descendently. You’ll notice how 3 sections are called “Untitled Section”, like I’ve earlier specified, HTML5 requires a heading for the new structural elements and in the above sample HTML5 page, three elements do not have a heading and 2 of them do have it.
It’s why I recommend you always add the heading and hide it via CSS whenever you don’t find it necessary.
8 thoughts on “Checking Your HTML Structure with HTML5 Outliner”
I thought that HTML5 is advance version of HTML so it is better one. It contains some good features. Thanks for sharing this information.
Not a bad tool.
I agree…this is not a bad tool…Thanks!!
I am not a good programmer, but many of my friends are programmer, I will recommend this one, surely it is a great help for them
I totally agree that the HTML5 is one of the best tool….
This was one those things that I had to study hard to understand when I first started using HTML5. Now I never start a project without considering using at the very least structural tags like the header, nav, aside, or footer.
I have been mainly designing static websites so haven’t really had a chance to to start sectioning articles like blog posts but I intend to start soon.
Great article though, hopefully it will encourage some of my local designers to start using HTML5.
I think it only guide us about the heading tags.