HTML5 and what it means for SEO

Latest HTML developments for the Industry

HTML5 and its SEO Implications

Last week I attended probably the greatest conference ever.

Google Developer Day 2011 (or GDD2011 for short) made its final stop, here in Berlin.
Designed to allow budding developers meet and exchange ideas, it was also a chance for Google to show off some of the latest developments in HTML5 and to present them to developers to see what the feedback was.

Some of the stuff they presented in the “Bleeding Edge HTML5″ presentation was absolutely mind-blowing.

(It gave me the idea to make this Twitter Voice Recognition project “Twittalk)

They really reminded me how right Sir Arthur Charles Clarke was when he said “Any sufficiently advanced technology is indistinguishable from magic.”

Some of the new things that are possible in HTML5 are really beyond what you would think HTML could support, a lot of small stuff that before was possible, but awkward, with JavaScript and jQuery, is now supported in the native HTML. Previously I had always thought of HTML as a static framework for a website, providing the skeleton structure but inanimate. You would need to use CSS to make things look nicer or stand out, and JavaScript to provide any interaction on the page.

For me some of the more interesting examples (in terms of SEO) are the

<details> and <mark> tags.

Now, it’s worth saying that some of the more cool HTML5 stuff is not really supported in all of the modern browsers. In fact some is currently only supported in the Google Chrome browser. its safe to assume that all of the major browsers will eventually support HTML5 but for now it is still somewhat in the test phase.


With the “details” tag you really get the chance to hide a lot of on page text. This is something that we have done previously with jQuery by loading the text in a specific div and then hiding the contents of the div, on body load, and offering a “Read more” link to expand the div to the full text. This classic bit of trickery means the Google Spider sees all of your keyword rich text, whilst the human visitor sees a more palatable few lines. Potentially allowing you to stuff in a bunch of spammy keyword rich text that any human visitor would consider unsightly.

The best thing about it is that you could reasonably argue that this was white hat as you don’t hide the text from the visitor you simply make it more comfortable for them to read, should they choose to.

For example, if you were an ecommerce site you could pack in a whole bunch of text describing the item you were selling, use various keywords throughout, and still present the end user with a stylish looking page free from cluttered spammy text.

Lets say we want to sell an item, “Apple iPhone 4s” You could set up the product page with a detailed list below it like:

Apple iPhone 4s 16GB £594.70
Buy it now

Details and Specs

Apple iPhone 4s 16GB Black


The iPhone 4s retains the same shape as its older brother the classic iPhone 4 but under the bonnet there are a ton of new changes which make this the best iPhone ever. with a stunning 1080p 8megapixel HD camera upgrade you can shoot pictures and video with stunning clarity

In the heart of the iPhone 4s you also have an upgrade in the processor department, packing the same A5 Dual core processor as the iPad 2, making the iPhone 4s probably the fastest smartphone on the market.

However, by far the biggest tour de force in the latest Apple iPhone has to be the inbuilt digital personal assistant, “Siri”. The digital assistant from Apple has made headlines across the tech scene with many already heralding it as a monumental shift in the way in which we interact with our digital devices.

User Reviews

i really love my Apple iPhone 4s 16GB in black, it is the Cheapest iPhone 4s on the market right now, I really got a great bargain iPhone.

The ifone 4s is the best iphone on available right now, I was not sure which one to buy so i read a lot of iphone 4s reviews before making my purchase. I think it is probably the best smartphone that there is right now.

iPhone 4s Specs

16 GB internal memory
Nice Camera
Makes Supermodels want to sleep with you

Related Products

keyword optimised Internal link 1
keyword optimised Internal link 2
keyword optimised Internal link 3

Just take a look at all that lovely text that we pack into space on the screen no bigger than a few words.
All of the rich keyword stuffed text gets seen and read by the Googlebot but the end user is spared from the annoyance of a visiting a page that is ridiculously long and spammy. The Googlebot eats up our SEO text, the user doesn’t and everyone is happy. No cloaking or hiding.
I’m pretty sure within a few months we will see people cramming hundreds of words into detail dropdown boxes in an attempt to hide content. Think Indian SEO agencies and Nike Trainers websites.

It becomes even more interesting if you think about buying/selling links that are hidden in a dropdown details box. If a website was unwilling to consider selling backlinks (Against Google’s guidlines kids, don’t do it) on the grounds that it would ruin the aesthetic look of the site or might cheapen it. Then something like the following might work:

Article article article. Article article article. Article article article.
Article article article. Article article article. Article article article.
Article article article. Article article article. Article article article.
Article article article. Article article article. Article article article.
Article article article. Article article article. Article article article.
Article article article. Article article article. Article article article.


Sold external link 1
Sold external link 2
Sold external link 3

Again, the Google bot sees the links normally but the user is spared the advertising. Since getting a backlink on a site is only about having Google see the link, the link purchaser would not have too much of a problem with it being quasi hidden from the human visitor.

Ok they are not really contextual links and could perhaps be considered on the same lines as footer or sidebar links but my gut feeling is that they aren’t. They are in the bulk of the content. I can only assume that the webspam team at Google will have to consider a similar level of downgrading to links hidden in a display tag, as they do with footer and sidebar links.


One of the other nice little HTML5 elements is the humble <mark> tag.
This cheeky little tag is so simple it makes me wonder why its taken so long in coming. Probably because you can achieve the same results in CSS, but its more tricky and cluttered.
Simply put the mark tag highlights any text wrapped in it, like This!

The default marking is yellow as seen in the example above, but you can also specify the colour with CSS. For example:
Red OrangeYellow Green Blue IndigoViolet

Whilst the argument that it is “less cluttered” and “easier” goes out the window once you have to use inline CSS to change the colour, it does remain more semantic. But, more importantly, I think/fear it gives webmasters the chance to say “THIS KEYWORD IS IMPORTANT” and show the Googlebot that the highlighted term is relevent to the page it is on.
It reminds me of the good old days when we discussed if the <b> tag was important for highlighting keywords.
In any case I have no doubt that the <mark> tag is going to be used, a lot, by misguided SEOs. In fact, I have the fear that it might ONLY be used by misguided SEOs!