Checking Your HTML Structure with HTML5 Outliner

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.

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

8 thoughts on “Checking Your HTML Structure with HTML5 Outliner

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

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

  4. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">