HTML 5 – SEO Perspective

by on

filed under

While many believe that HTML 5 will not come into play until 2022 (yeah right), we’ve already begun seeing websites that have started using HTML 5 and with the bigwigs supporting and backing it all the way (think Google Wave), HTML 5 is already upon us.
Before I delve into the SEO perspective lets take a look at basics of HTML 5 first. HTML 5 has many tags some of which I’ll briefly explain :

  • Header : Can contain primary information about the page following it or the article, blog post following it. I say page or blog post/article because the header can be specified multiple times on a page as seen in the image below
  • Navigation : Can contain links to different sections of the page or the site
  • Section : Specifies a section of the page containing an article or a blog post or whatever you deem fit. It is similar to the <div> tag we use now
  • Article : Will contain the main content of the page and can act as the primary focus of your page
  • Aside : Can contain supplementary or related information to the page or the site
  • Footer : Can be used multiple ties on the page like the header

The structure of a page in HTML 5 will look like the image below from an article back at Smashing Magazine.

HTML 5 Structure

HTML 5 Structure

What this is means is that instead of specifying <div id="header">, you will now write it as <header> – as simple as that. Of course my favourite feature of HTML 5 would be the Doctype – hands down. Instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> we now have <!DOCTYPE html> – Clean and simple. So apart from the  aesthetic beauty (which I’m all gaga about) of HTML 5, what does it mean for SEO? Now, because we will explicitly specify what goes where, the page will be broken down into appropriate components which will be standard across all pages.

Now for a page like the one in the image above, if a spider visits the site it knows exactly that the header tag will give primary info about the following article or page and aside will usually signify additional information related to the article or the site. So the spider gives more importance to the proper tags instead of spidering the whole page. This would then imply that it would take faster for a page to get spidered, saving loads of time for the search engines and maybe higher crawl rates(?). It would also mean that the spider would get better content thus translating into better user experience.

It was sad to see Ian Hickson drop the video codecs due to opposition from Nokia and Apple, because the video tag would have translated into a whole new way in which videos could be optimised. This would have helped sites that use video content implement video optimisation as a new step in their SEO process.

Now, with rumours flying around that Google plans to implement Twitter-like real time search to its arsenal, we could be entering into a period where a SEO process could be changing dramatically. HTML 5 has taken its first steps into the web world and atleast theoretically, it can change the landscape of the SEO World – whether it does or not, is something we will have to wait and see!

3 responses

leave a comment
  1. With these new tags it will really save our time and also help to define a particular section easily. We can have clean html page with html5.

  2. Thanks for this article Nimit.

    HTML5 and the future of SEO certainly looks interesting.

    What would be the best way to style the section > header area, or the section > footer area?

  3. @Knoxville Web Designer : It primarily depends on what your section is about. Taking the example of the above image, the header & footer would have width = section width. For more information you can check out W3′c draft on HTML 5

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>