Every HTML page ideally should (and usually does) contain a document outline. This is the logical structure of the page as generated by the ...
Every HTML page ideally should (and usually does) contain a document outline. This is the logical structure of the page as generated by the title, headings, sub-headings, form/table titles, and so on. The HTML 5 specification makes use of section tags for maintaining a document outline. While this new scheme might make things easier, it could present a danger to your site's SEO if not used properly. Here's how it works;
About HTML 5 Section Tags
In HTML 4, we had the heading tags from <h1> to <h6> for defining a document outline. Each higher number tag becomes a child of the lower number tag. For example, the following structure...
<h1>HTML 5</h1>
<h2>Specs</h2>
<h3>Section Tags</h3>
<h4>Section</h4>
<h4>Article</h4>
<h4>Aside</h4>
<h3>Others</h3>
<h2>Features</h2>
...will produce the following outcome;
- 1. HTML 5
- 1. Specs
- 1. Section Tags
- 1. Section
- 2. Article
- 3. Aside
- 2. Others
- 2. Features
HTML 5 Builds upon this concept, and adds more tags, such as the <section>, <article> and <aside> tags. These can be used to better define the document structure, since the HTML 4 specs on this are somewhat restrictive. You can define the following code to represent the same output;
<h1>HTML 5</h1>
<section>
<h1>Specs</h1>
<section>
<h1>Section Tags</h1>
<section>
<h1>Section</h1>
</section>
<section>
<h1>Article</h1>
</section>
<section>
<h1>Aside</h1>
</section>
</section>
<section>
<h1>Others</h1>
</section>
<section>
<h1>Features</h1>
</section>
A bit more to take in, but it will produce the same result as before. This new scheme can allow for more flexibility, and permit users to have as many nested levels as they want, instead of just 6.
However, there's an obvious problem. Have you spotted it yet? Pat yourself on the back if you have!
Notice how I've used h1 tags for each heading and sub-heading? The section tags handle the structure, or 'indentation', so to speak. So the use of in-order headings does not matter, and the section tags overrule the default structure. The following code would also produce the same output.
<h6>HTML 5</h6>
<section>
<h3>Specs</h3>
<section>
<h2>Section Tags</h2>
<section>
<h1>Section</h1>
</section>
<section>
<h1>Article</h1>
</section>
<section>
<h1>Aside</h1>
</section>
</section>
<section>
<h2>Others</h2>
</section>
<section>
<h3>Features</h3>
</section>
Notice that the h3 tags have become the children of the top h6 tag, the h2 tags are now children of the h3 tag, and the h1 tag is parented by an h2 tag.
Crazy world!
What it means?
This overrule should not happen. Not only does it make things confusing, but also ruins the show for search engines and user agents alike.
For search engines, headings of a higher rank (h1, h2) might be overrun by headings of a lower rank (h3-h6). You know how important these headings are for SEO, right? (If not, read this article on using headings to optimize your blog post). Search engines assign value to top-level headings, and classify content based on these headings. Now if you have multiple h1s, that only serves to confuse the search engines. Secondly, h1s should be most keyword-healthy, followed by h2s, h3s and so on. You aren't doing yourself a favor by breaking the
Most user agents haven't adopted these specifications yet. They probably won't any time soon, but the face remains that if confronted with these new tags, the user agents will simply ignore them. So the document outline you've defined with these new tags will be thrown out of the window, and the agents will simply go back to the old ways, and use the default h1-h6 scheme for drawing up the table of contents, or otherwise interacting the page.
What should you do/?
This DOES NOT mean you shouldn't use the HTML 5 section tags for defining structure. If you as a developer want to provide a meaningful document structure, use the h1–h6 elements to express document structure. DO NOT rely upon the HTML5 document outline. By all means use the HTML5 section elements, but do not rely upon them to convey a meaningful structure. If at some point in the future the HTML5 document outline ceases to be a fiction, you will be covered as the use of h1-h6 is backwards compatible.
The HTML 5 spec has the same recommendation for you.
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.
So tell me guys, did you spot the problem? Have you started using the section tags on your website? What are your views on this new scheme for outlining a document? Leave your responses in the comments section below. Cheers :)
COMMENTS