By Meredith Barnhill
HTML5's ease-of-use and compatibility with a variety of platforms and browsers with no need for plug-ins allows developers to do some revolutionary things on the Web.
No Flash necessary
To include video or multimedia elements in the current version of HTML, designers have to use third-party codecs and "wrappers" to display the content. Interactive elements like games and even entire Web sites that use Flash require a proprietary plug-in to function. If users do not have this plug-in or don't have the latest version, they will not be able to view the content.
In HTML5, designers can customize players for multimedia elements using video, audio or canvas tags. Not only does this make the elements easier to design and edit, but it allows any platform to access the content— including Apple's mobile users. Eliminating the need for third-party applications to implement multimedia to Web sites means that the content will be presented the same for all users across all browsers without requiring users to download extra files and programs to view it.
Canvas
The canvas element takes care of most of the interactive functionality that Flash offered. Canvas succeeds scalable vector graphics (SVG) which are dynamic images animated using JavaScript. SVG is widely used and standardized by the WC3 but is not supported by Microsoft's Internet Explorer without third-party applications. Canvas not only allows designers the same functionality as SVG, but is supposed to be considerably faster. Using the canvas tag with JavaScripting, developers can add regions where users can draw, drag, drop photos or write text.
Examples of canvas include Sketchpad, which enables users to draw in a browser window much like a desktop paint application like Microsoft Paint. A developer used canvas to recreate the classic game Asteroids.
Unlimited Functionality with JavaScript
Until HTML5, integration between HTML and JavaScript was neither smooth nor standardized. Developers used JavaScript to create workarounds for non-Flash dynamic content. The Web Hypertext Application Technology Working Group (WHATWG) recognized that scripting is necessary to enhance HTML-based Web pages and are ensuring that the two languages work well together so designers don't have to use "hacks" to get the scripting functionality they want.
Google Wave is a prime example of dynamic content in HTML5 using JavaScript.
Access to Offline Elements
A major limitation in today's Internet is the inability to access information offline. HTML5 allows caching of page elements and storing them for offline use. With caching tags, HTML5 stores versions of dynamic elements in a device's memory for later use. Users will then be able to see and edit things like emails in Thunderbird or to-do lists on Remember the Milk without an Internet connection.
Getting rid of <div>
HTML4.01 relies heavily on div tags — div stands for division and is the tag that divides a Web page into sections. HTML5 replaces the need for "div" tags by using more obvious words to describe sections of a Web site, such as the audio tag. The updated tagging in HTML5 makes Web pages much easier to design and edit. Searching through dozens of div tags looking for the one that contains an audio wrapper is far more difficult than looking for an audio tag.
Check back each day this week for more articles in the HTML5 series:
Part 1: Introduction to HTML5
Part 2: Groundbreaking Functionality
Part 3: Changing the Mobile Web
Part 4: Conclusion
About the Author
Meredith Barnhill is a multimedia journalist in Austin, Texas.