HTML5 Elements For SEO Benefit
The release of HTML5 is still quite a long way off with W3C announcing that May 2011 will be the final call for the specification and a final release expected by 2014. When HTML5 is finally released it will replace HTML 4.01 as the standard on the web and will feature many new elements and discontinue a number of older and outdated elements still current in HTML 4.01.
The good news for web developers is that HTML5 will be backward compatible with HTML4, so you won’t need to code your website from scratch to meet the new standards. Here we will take a look at some of the new elements featured in HTML5 and the possible impact and benefits they could have on SEO.
Article Element
The article element can be used to represent a self-contained composition in a document that is independently distributable or reusable, e.g. in syndication.
In other words, if you own a blog and have written a cracking piece of content for it, you’ll want to make use of the article element as Google will no doubt attach greater weight to syndicated content, much as they do now with blog posts. Of course the article element isn’t just limited to blog posts, and could also be used for newspaper articles, forum posts, user generated content, etc. On the flip side, web pages that are low on content may well see a negative effect in their SERPs positions as HTML5 comes into wide spread use.
Section Element
The section element represents a generic section of a website. So for instance, if your website is using a jQuery / JavaScript tabbed slider, the section element could be used to define each slide.
You could also find yourself splitting your homepage into sections. It’s important to note that the section element is not a container element and should not be used to style your page layout. In much the same way as the article element, the section element is a way for search engines to quickly identify the important information on your website and developers and SEOs to identify the page copy that really matters.
Nav Element
The nav element will be used to represent a section with navigational links. The nav element doesn’t need to be overused and should only be used where there is a major blocks of navigation links. F
or example; the nav element will not be necessary where there are links in the page footer. The nav element will help search engines to formally identify the navigation links on a web page. This will help search engines to identify the most important pages on your website, but also to give navigation link less weight compared to a contextual link.
Header Element
The header element is used to define a grouping of elements that make up the heading or navigational aids of a website. This will usually consist of a hgroup or h1 – h6 element but it’s not a pre-requisite.
The header element can also be used to wrap a search form, any branding or logos, or a section element’s table of contents. When compared to the article and section elements, the content within a header element will likely have less weight in the eyes of search engines.
Footer Element
At face value the footer element looks simple enough, however it’s usage in development are not as clean cut. Typically, a footer contains information about its section, such as the author and copyright data, and links to relevant documents and its parent page. However, the footer element doesn’t necessarily have to appear at the bottom of a page.
For instance, if you have a ‘back’ button at the top and bottom of a long article, the footer element could be used to represent the articles ancestor sectioning content or sectioning root element. In much the same way at the header element, it is thought that the content in a footer element will hold less weight in the eyes of search engines.
Aside Element
The aside element can be used to section content on the page that could be considered as separate from that of the main page content. For example advertisements such as skyscraper banners, groups of navigational elements or pull quotes would be wrapped in the aside tags. It is still unclear how the aside element will be interpreted in the eyes of a search engine.
W3C actually state in their documentation that it could be used to contain advertisements, in which case search engines would no doubt completely ignore the content. However, if used for pull quotes, the aside element could be used to add emphasis to the main page content.
Alex is a web developer and SEO working a company that specialises in rakeback and rakeback deals. You can find him on Twitter @harvey1dash8.
Latest posts by DST Contributor (see all)
- Survival Guide to Multilingual SEO - May 14, 2013
- Five Killer Link Bait Tips That Can Provide You With ‘Passive Marketing’ - May 11, 2013
- 5 US SEO Events to Visit to Spend a One Month Vacation with Purpose - May 9, 2013
10 Responses to “HTML5 Elements For SEO Benefit”
Newsletter
Join the Contest!
Tags
Our Projects
Such a nice article. Thaks for share.
I wanna know if we can start use this element in our page, or we have to wait till the html5 be released…
thats my question… if anyone could answers me I will apreciatte that.
Thanks for everything.
Cya.
Jaspreet Kaur Reply:
July 17th, 2011 at 8:13 am
Yes, you can use html5 in your web pages today. It’s supported by all latest web browsers, and support can be added with help of javascript in older web browsers (with only one line of JavaScript code).
There are many service providers how can help you in upgrading to HTML5 today.
I think its very diffuse arguments for seo. Search engines need to take care of all kind of contents. A title or header have logically more weight but search engines prioritate popular or long term sites it would be bad to think that a html5 page or perfect validated site or not matter so much. A visitor judge what he sees or experience. Inlinks are the golden key.
@ Desentupidora,
All of the above elements will work in ie6+, ff, etc. currently so you can use them now. The only caveat is IE doesn’t really recognize them in that you can add styling to them and have it render.
So the workaround is to add the new element, but have a DIV wrapper inside of it to handle the CSS styling/positioning.
You can use JS libraries though to combat this. One is modernizr ( http://www.modernizr.com/ ) which adds support for IE so they recognize the tags.
So without the JS, just do:
content
and then do your CSS on #this-section
instead of doing:
content
or add the JS and it will work cross browser. The first option is your best bet since users with JS disabled won’t see a blown up page. Although the % of web users with JS disabled is quite low I believe.
I would stay away from canvas and audio/video tags though for now as those are not cross-browser compatible as of now. But like CSS3, know your audience and use when appropriate.
er, whoops it hid the html examples, it should say:
<section>
<div id=”this-section”>
content
</div>
</section>
and then do your CSS on #this-section
instead of doing:
<section id=”this-section”>
content
</section>
what’s a good source to see the codes and learn the new codes and what options there are for each?
This latest version of HTML saves development time and labor. Like everything else in information technology, advances move swiftly into the mainstream. So it will be with HTML5. Developers
This is a good article. Keep doing this good job.
Bookmarking it by yourself is not enough, think it is just one user that has bookmarked it. Try to make your content or website attractive enough that visitors want to come to it again and again that will help you as far as real SEO benefits are concern.
header element is very important element and I think we can keep H1 in that tag. I belive that h1 tag is very imp for search engines, I hope this change in HTML5 will not break that rule. any one have more idea about it then please share.