HTML5: Tomorrow's future...today!

posted by Paul - 10:35 12/10/10

Web developers will know that we are currently in a transition from HTML4 to HTML5. This is the biggest advance in web technology to date and is an exciting time for us techno-geeks in the Production department.

Although HTML5 is still in its infancy, here is a brief overview of some of the new features it has to offer, as well as a look at what this could mean for the future of web development.

New semantic tags

First of all, there are a range of new tags that will replace generic <div> and <span> tags. These include:

• <nav> to indentify a navigation area.
• <header> - could contains headings, breadcrumbs and so on.
• <footer> - this might contain copyright/legal info or a bottom navigation.
• <article> for externally referenced material such as a quote.
• <aside> is used for content that stands out from the rest of the page, such as a pull quote.

On the outside, these tags make no difference. However, in the background, they generally make the page more semantic and thereby easier for search engines to read. In the SEO motivated industry in which we operate, this can only be a good thing!

It should also be noted that headers and footers do not just feature once per page as you might expect. Each individual section can have its own header and footer. For example, a forum could feature one for the actual page, the forum container and each individual post.

New input types

Another nifty new feature of HTML5 is the inclusion of new <input> field types. These allow for customisation of your bog standard text boxes, turning them into clocks, calendars and slider bars, making it easier for the user to input data.

Incidentally, if viewed in a browser that doesn’t naturally render HTML5 elements (such as Internet Explorer), they just appear as normal text boxes so the page doesn’t break. You simply get better features by using a better browser.

Embedded multimedia

HTML5 has also incorporated several new tags that can embed multimedia elements directly into the page without the need for an external plug-in such as Adobe Flash Player or Microsoft Silverlight. These include:

• <audio>
• <video>
• <canvas>

Whilst the audio and video tags are self explanatory, canvas allows the user to create anything from animations to interactive games, completely using JavaScript.

Anyone who has had to mess around putting individual videos onto a page using an external player and several JavaScript files will see the idea of doing so with only a couple of lines of HTML will probably see the <audio> and <video> tags as something of a godsend.

However, in terms of creating complex interactive web applications (such as our new website Saving Squad), I personally can’t see purely JavaScript coded objects placed in a <canvas> replacing a tool as great as Flash.

Performance

So, there are plenty of new HTML5 tools for us web developers to play with, but how well do they function in each browser?

At present, Google Chrome is leading the field in HTML5 support, according to html5test.com where each major browser was scored out of 300 based on the number of HTML5 elements they supported. The results are as follows:

• Chrome =217/300
• Opera = 159/300
• Firefox = 139/300
• Safari = 128/300
• Internet Explorer 7/8 = 27/300
• Internet Explorer 6 = 12/300

Clearly, the main issue with incorporating HTML5 elements into websites is cross browser compatibility, particularly regarding Internet Explorer. Whilst the new semantic tags can be rendered in any browser as long as they are set to display:block in the CSS, the more functional tags such as <video> and <canvas>won’t actually do anything.

Since a massive 43% or internet users still use Internet Explorer in some form as their primary browser (source: www.w3counter.com/globalstats.php), sadly it looks like certain HTML5 elements may be out of bounds to developers until Microsoft finally releases IE9.

Surely some sort of compromise is in order. This is where graceful degradation comes in. This means that a website is designed for new browsers, but will still function correctly in older browsers. Ultimately (as is demonstrated by the new input types), users with a better browser will have access to better features and an improved user experience.

And I guess you can’t get much fairer than that.

Next time: A look at CSS3!