HTML 5 – What elements should you use right now (June 2011)?

HTML 5 is here with much deserved fanfare and attention. Before cracking open a book and putting HTML 5 elements all over your website, you need to consider who your users are and you site purpose. The main groups of website and web application users are below.

Company Intranet – Internet Explorer Only

If you developer intranet apps for your company and your company’s policy is for these to be IE only, then use as much HTML 5 as you want, even if your company is still stuck on IE 6.  There is a JavaScript file on Google Code that will convert your HTML 5 elements into IE 6 compatible HTML 4 elements.  Eventually in the future when your company upgrades to IE 9 or 10, these HTML 5 elements will shine.  It may seem purposeless right now, but it will help you keep your skills up to date.

Public Website – All possible users regardless of technology (IE 6 with JavaScript disabled)

It’s a sad fact that about 9% of worldwide web users are running IE 6 with JavaScript disabled.  If you are in the difficult situation of having to accommadate them, you can still use many HTML 5 features, with the exception of the new semantic tags header, footer, section, article etc.  You can still give your divs classes or ids these names however, so it’s not too bad.

However, you can still use the fantastic new form elements (email, number, website etc) and they will render normally in IE6.  Use the new HTML doctype header (<!DOCTYPE HTML>) at the top.  IE 6 will assume it’s a HTML 4 header and other HTML 5 enabled browsers will recognise it.

The new ARIA roles are also compatible with IE 6, which is great.

Public Website – Modern and mobile browser oriented, obsolete browser users not important

If your company feels that IE 6 users who choose to disable JavaScript are not an important demographic, you can use as much HTML 5 as you want.  Ensure to include the defacto standard IE 6 JavaScript workaround for IE 6 users with JavaScript enabled.  You can create a div only visible by IE6 containing <noscript> tags giving a message about neededing JavaScript enabled.

For further info on using HTML 5, there is a brilliant video from an HTML 5 author at http://vimeo.com/15755349

Advertisements
This entry was posted in Free Videos, Technical and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s