--> How HTML 5 Section Tags Can Kill Your Site's SEO? | Experience Lab - Online business creation and development guide for bloggers and startups

How HTML 5 Section Tags Can Kill Your Site's SEO?

Every HTML page ideally should (and usually does) contain a document outline. This is the logical structure of the page as generated by the ...


HTML 5 Section Tags


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 chain of command flow of these headings!



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

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How HTML 5 Section Tags Can Kill Your Site's SEO?
How HTML 5 Section Tags Can Kill Your Site's SEO?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwSS_UP2DVfw1NbpzY8AvYBCqHAoBpgJGzEfU0kZ37zlOafvsy5LccpI5PgKrMJRgkB1JA26rZWSc1uiuXaMeURGBuTFPpvpU8vDpDO8yx8cnTIcnrbodwwohKcB3TuNQudRwIKfIsra6/s1600/html-5-section-tags.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwSS_UP2DVfw1NbpzY8AvYBCqHAoBpgJGzEfU0kZ37zlOafvsy5LccpI5PgKrMJRgkB1JA26rZWSc1uiuXaMeURGBuTFPpvpU8vDpDO8yx8cnTIcnrbodwwohKcB3TuNQudRwIKfIsra6/s72-c/html-5-section-tags.jpg
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/05/how-html-5-section-tags-can-kill-your.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/05/how-html-5-section-tags-can-kill-your.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy