Dataworks Blog



    HTML 5 is not something new anymore but for those yet to jump in, what’s the best way to get your feet wet? First off it helps to see HTML5 as a collection of individual features. Approaching it in this way allows an incremental approach. These new features are a combination of new mark up and a DOM API which tells us how these new elements interact with Javascript through the DOM. So where to start? Let’s take a look at some of the basic features that can be adopted.

    What’s up doc?

    Moving your current site to HTML5 is as simple as changing the DOCTYPE. The HTML 5 doc type is backward compatible with HTML 4 so your site will work as before but you are now ready to start leveraging the advantages of HTML5. Here’s what this looks like

    < ! DOCTYPE html >

    That cleans things up considerably when you consider they used to look like this.

    What’s in a name?

    Now you’re ready to start using the new elements supported by HTML5 which allow for a more semantic mark-up of page layout, these include, header, section, article, aside, nav and footer. These elements allow you to improve the semantic meaning and structure of your sites pages. Our old friend the div will still have its place but the new elements make the mark-up cleaner and help clarify the intended layout. In the future this will be used by search engines and browsers to improve user experience.

    Form over function

    Forms have also been improved in HTML5, but all of the familiar input controls are still supported. The improvements allow for better form interaction and in some cases reduce the amount of client side code previously required to achieve the same user experience. These new features degrade gracefully so your customers with older browsers, while not getting the improved experience, will still find that forms work as expected.

    New elements have been added including email, number, url, range, date, search, etc. These new input types greatly improve usability on mobile devices where the device can now present the appropriate keyboard for the input expected.

    Form validation will be simplified using these new input controls. Take the example of email addresses. Currently Javascript would be used for client side validation of email addresses; this requires effort on the part of the developer and may introduce bugs, not to mention that your customer may have Javascript turned off. As more browsers support the email tag these inputs will be automatically validated. And that’s just for starters, there’s so much more, with video, canvas, geo-location, offline web applications, local storage etc. So jump in, change your DOCTYPE today, simplify your development efforts and let your customers enjoy a richer more user friendly breed of website.

  • Back to Blogs