Checking Your HTML Structure with HTML5 Outliner

Filed in Code , Dev talk 8 comments

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.

Posted by Catalin   @   20 June 2011 8 comments
Tags : , , ,

Share This Post

RSS Digg Twitter StumbleUpon Delicious Technorati

8 Comments

Comments
May 25, 2011
10:15 AM

I thought that HTML5 is advance version of HTML so it is better one. It contains some good features. Thanks for sharing this information.

May 26, 2011
10:55 PM
Jul 14, 2011
4:24 AM

I agree…this is not a bad tool…Thanks!!

Jul 15, 2011
6:04 AM

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 :)

Dec 5, 2011
10:46 AM
#5 web design Service India :

I totally agree that the HTML5 is one of the best tool….

Apr 4, 2012
6:38 AM

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.

Aug 4, 2012
11:37 AM

I think it only guide us about the heading tags.

Trackbacks to this post.
Leave a Comment

Previous Post
«
Next Post
»
Luix designed by Video Game Music In conjunction with VPS Hosting , Website Hosting and Shared Hosting.