Click Networks - IT Support Glasgow

Click Networks - IT Support Glasgow
Click Networks - IT Support Glasgow

Friday, 16 April 2010

HTML5 for today right now - It's a DOM thing ok!

Last week I brought up the question of whether it was ok to start developing and authoring sites in the still being devised markup language of HTML5. Today I will talk about which tags you can start using now in your web apps to future proof them for the future.

The vision and aim of HTML5 as mentioned in my last post is an attempt to make structured data more semantic (carry more inherent meaning inside of it) which will allow more advanced processing of the data than is currently possible with other doc types such as HTML4 and XHTML.

Apparently, when developing the HTML 5 spec, the editor, Ian Hickson of Google, analyzed over a billion web pages to find out how authors were actually using these elements. He discovered that in the top 20 class names used in the markup for this huge set of data were classes for common requirements: footer, header, nav, menu, content, and main.

So the foundation of the HTML5 markup spec consists of the following new tags which allow us to markup our website or blog in more meaningful ways:

  • header

  • footer

  • nav

  • section

  • aside

  • article

Now even though not every browser supports these tags at the moment, there is no reason why you can't start using them now to future proof your documents for the next wave of development. Whilst Firefox, Chrome, Safari and Opera provide limited support, again Internet Explorer provides almost nothing (no surprises there from Microsoft).

So the way to get IE8, IE7 and possibly IE6 to start recognising and parsing these tags and therefore enable the ability to style them via CSS, is to introduce the tags into the DOM via the use of a tiny and non-intrusive linked javascript. Then we can add style rules—floating, background colors, margins. This one line piece of code introduces the following tags into the DOM: abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video.. Once in IE's DOM the browser recognises them which allows you to style them even though actual functionality for that element and attribute may not work, which means that you can start developing for the other browsers and at the same time enable backwards compatibility for IE as well as forwards compatibility for IE9 which apparently is being shipped with some support for HTML5. For more information, discussion and comments about this HTML5 DOM script please see:

Alternatively you can use a script in the head of your document which enables you to call only those tags you wish to use:

So start authoring your docs in HTML5 today and future proof your sites whilst getting ahead of the competition. Although there is no evidence as yet that Google is making any meaningful sense out of the new tags, there is ample evidence to suggest it is wise to be prepared for the change in the algorithim when it happens for SEO purposes.

Next week I will go into more detail about HTML5 and even introduce some new ideas about how you can use Microformats and rich snippets to enhance your website, synidcate its content and improve your ranking and overall brand in Google and Google Maps all at once and at the same time.

No comments:

Post a Comment