Give HTML5 a big hug

The release of Internet Explorer 9 comes with a wave of relief and panic. Panic because in some development cases, this means we now have four (yes, four) versions of one browser to test website in which I’m not particularly looking forward to doing. The silver lining here is the better implementation of emerging standards this release offers and the wider possibilities it gives us developers. It’s worth noting, I’m yet to test the browser at the time of writing, but I’m hoping this marks a step forward in the development of our sites. One of the major leaps will be the ability to use HTML5 with a pretty safe assumption that most people are using browsers with native support. This post aims to show just a few of the features of HTML5 and why making the switch will not only continue to support up-to-date standards, but allow us to be more efficient in our practices.

Forms

For the last 8 years, forms in their many shapes and sizes have been the thorn in my paw. Lack of native error handling has meant getting a form to check it has the right data before carrying visitors to the next stage required Javascript or back-end solutions, which is highly inefficient requiring more hours from a project budget to implement. HTML5 now allows us front-end folks to build this functionality right in at the same time as applying the design. So when a form is built, it’s going to validate first time right from the outset. Brilliant!

Better for accessibility

HTML5 features some new semantic coding practices which help us to maintain clean and fast HTML code but also builds in functionality which can help people using assistive technologies to view websites. When coding up a content section of a site, it would usually be marked with an id which helps identify it. The problem here is the id can be anything and with thousands of people coding HTML across the globe, there’s a whole range of varying possibilities. With HTML5, there’s now a way to appropriately name a content section using WAI-ARIA, effectively a set of rules which define certain areas on a site (header, nav, content etc) allowing for more consistent coding practices.

Set up for mobile

Mobile browsing is continuously gathering pace and smartphones are leading the way. Phones with no built in keyboards have the ability to taylor the keyboard depending on what it is being used for. HTML5 embraces this ability and allows us to define our forms for the visitors. An email form input will show the email keyboard with quick access to common symbols like ‘@’, telephone form inputs show the telephone keypad etc. This simple yet powerful functionality makes forms on smartphones much easier to fill out, which could well be the difference between a visitor filling a CTA out while on the move and leaving your site, never to return.

These are three very brief examples of how HTML5 can help improve websites and there’s a lot more to be had. The web is moving towards exciting times……

Enhanced by Zemanta