Getting Started With HTML5: The Right Tools

Fahmida Y. Rashid (May 8, 2012)

Developers are ready to make the plunge into HTML5: to develop sophisticated Websites and applications that work the same regardless of what computer or mobile device is used.

Do you have the right tools to make it happen?

The HTML5 promise is intriguing for users and developers alike. Users will no longer have to download and install software or browser plugins to be able to view a Web page or access an application. Developers don't have to build sites optimized for each hardware platform because it is automatically taken care of by the HTML5-compliant Web browser such as Internet Explorer 9.

Even though the standard is still being tweaked, most modern browsers support most, if not the entire, HTML5 specification. With the new markup, CSS capabilities, and the latest JavaScript APIs, the list of what developers can do on the Web has expanded dramatically. They can easily incorporate video, audio, fonts, drag-and-drop, Web graphics, and animations directly into Web pages. Microsoft has recently launched several Websites for Internet Explorer to highlight some of the more advanced features.

The browsers are fast getting up to speed for users to enjoy HTML5 applications, and so developers need to make sure their tools are up to the task as well.

While this may sound like a no-brainer, it is worth taking the time to select and setup the best development and testing tools before starting any project. This is especially true when making a switch from other Web technologies. What worked for other technologies may or may not be the best tool when tackling HTML5.

For HTML5 development, having a strong IDE with as much JavaScript code completion support as possible is critical. Many of the popular developer tools have been updated in recent months to add HTML5 support.

Developers using Visual Studio 2010 Service Pack 1 should manually set the HTML5 schema as the default in order to take advantage of IntelliSense support in Visual Studio for the 28 new semantic tags, including the new tag-specific and global attributes. The Web Standards extension also adds advanced HTML5 and CSS3 IntelliSense and validation for new browser capabilities, such as geo-location and DOM storage, to all editions of Visual Studio 2010.

HTML5 is the default document type in WebMatrix, Microsoft's free Web development tool, which makes it even easier to get started. Developers who use Expression Web 4 instead of Visual Studio can get the same IntelliSense support with Expression Web 4 SP1. The HTML5 doctype is also available for ASP.NET MVC. The ASP.NET MVC 3 Tools Update shipped Modernizir 1.7, a JavaScript library that simplifies HTML5 development, in the scripts folder.

While there are a number of Websites jam-packed with tutorials and code snippets to help build forms, use video, integrate geo-location, and other HTML5 elements, it's worth bookmarking the official guide and the specifications from the World Wide Web Consortium (W3C). The W3C's Web Developer's Guide to HTML5 shows how to write HTML5 documents and Web applications. The official HTML5 spec page is a great reference for the use of vocabulary and associated APIs when working on a project.

With the proper IDE tool, an HTML5-compliant browser to inspect DOM elements and debug JavaScript, and mobile devices (or at least the emulators) to check how the application runs on the smaller screen, developers can get started now taking advantage of the latest way to build Web pages.

Fahmida Y. Rashid is a contributing editor for Slashdot and SourceForge.