Seven Reasons to Move to HTML5
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
HTML5 is the next revision of the standards that govern how web browsers, search robots, and other user agents interpret and display HTML documents. Its advent promises a richer Web experience for site visitors, more focused information for robots, and more tools to enable web authors to collaborate and share.
Current HTML5 Status
Currently and technically speaking, HTML5 is defined by a set of working draft recommendations for Web standards that the World Wide Web Consortium (W3C) will submit to various international standards bodies, such as the International Standards Organization (ISO) which, after discussion and revisions, will pronounce it a standard. Although this will take several years, all major browser manufacturers are busily incorporating HTML5 features into their browsers. There hasn’t been this much excitement in the web development community in many years.
Even if you are not a web developer, you can experience some of the excitement by searching the Web for “HTML5 demos” or following #HTML5 on Twitter and checking out sites in a HTML5-compliant browser such as the current versions of Safari, Opera, and Chrome, or the beta versions of Firefox 4 and IE9.
Page Development
Most web pages today are coded to conform to one of a handful of HTML4 and XHTML standard document types. From a developer’s point of view, HTML5 broadens and simplifies page development. This is exemplified by the HTML5 document type declaration:
<!DOCTYPE html>
as the first line of a web page replacing an HTML4 declaration, such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
or an XHTML declaration, such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
What’s also nice is that most of the new HTML5 elements are designed to fail gracefully in non-HTML5 compliant browsers. The much discussed video element, for example, provides for multiple fallback strategies to play video content including full support of Flash and other plugin-based players. HTML5 is designed to work well with existing Web practices while setting a direction for the future.
JavaScript Integration
Another HTML5 strong point is JavaScript integration. The current HTML standards support scripting languages if they meet ECMA (another standards body) requirements. In practice, this means JScript (Microsoft), ActionScript (Adobe), and JavaScript (everybody else). The interfaces that state how HTML4 elements should respond to user or system initiated events aren’t very well defined. As a consequence, interactivity on the web is powered mostly by years-old DHTML techniques. HTML5 will change that. Its draft recommendation uses JavaScript properties and methods to fully describe the behaviors of each document element. This provides three solid legs—HTML5, CSS3, and JavaScript—supporting the web platform.
Browser Support
Browser support for HTML5 elements and features is still a mixed bag. The two most popular browsers—Internet Explorer version 8 with 28 percent of market share, and Firefox versions 3.5 or 3.6 with a combined market share of 20 percent (according to NetMarketShare.com)—have very limited HTML5 support. The third most popular browser, IE6 with 16 percent market share, has no HTML5 support at all, nor does IE7, the fourth most popular browser. The browsers with the best HTML5 support are Opera, Chrome, and Safari, including the version of Chrome that runs on Android and Safari for iPhone/iPad. For a detailed comparison, see this Wikipedia article on HTML5 browser support.
Why HTML5 Now?
With less than one in five people using HTML5 capable browsers and HTML5 not a “standard” but merely a “working draft” recommendation, you’re probably wondering, “What’s the hurry to move to HTML5 now?”
Technology and software evolve quickly. IE9 with good HTML5 support is in public beta and, a year from now, will likely replace IE8 as the browser with the biggest market share. Similarly, Firefox, Safari, Chrome, and Opera will have stronger HTML5 support by the end of this year. Even corporate environments that tend to use older versions of Windows and IE have solutions. Google Chrome Frame, for instance, is a free plugin that gives IE the HTML5 capabilities of its Chrome browser. There are also a number of HTML5 shims that dynamically attach new HTML5 elements to IE’s document object model (DOM) making HTML5 workable for IE7 and IE8 users.
HTML5 is a solid advance in web technology that acknowledges the requirement for web pages to be findable. The new elements provide a richer and more consistent description of a page’s layout, enabling search robots and other software to distinguish important content elements from other page parts.
While HTML5 is a working draft, all of the major players and browser makers are on board and in agreement on the shape and direction of HTML5. Formal standardization is largely irrelevant. HTML5 is here now!
Seven HTML5 Benefits
The following sections explain the benefits that HTML5 will bring to your web development.
Easier Code Maintenance
New HTML5 elements—section, header, footer, article, aside, and nav—are available to define specific document object types. Simpler HTML5 markup like the navigation element:
<nav id="main">...</nav>
replaces the overused division element:
<div class="nav" id="main">...</div>
This adds a measure of consistency to HTML coding and makes for simpler CSS style sheets. HTML5 recognizes the need of blogs, content management, and publication systems for a higher level of document abstraction. These new elements also make it easier to write CSS style rules and JavaScript functions.
In addition to new elements, HTML5 has many new element attributes. One of the interesting new features is the ability to add your own attributes to any element if you begin the attribute names with data- and don’t use the same name more than once in any element. This is a simple extension, but it allows developers of content management systems and page templates to encode more information into page elements and make that information easily available to search robots and browser scripts.
Self-Checking Input Forms
The input element in HTML5 has a bunch of new specific text types including email, url, date, number, and range. Because text is the default value, these new attribute values work like ordinary text input fields in HTML4 but allow the HTML5 browser to automatically check the input before the form is submitted. Other new input element attributes, such as placeholder and required, make form development easier. Check out how this works by saving the following code as an .html file and opening it in Chrome.
<!DOCTYPE html>
<html lang="en">
<head><title>Email Input</title></head>
<body>
<form action="javascript:alert('Good!');">
<input type="email" required placeholder="email address"/>
<input type="submit"/>
</form>
</body>
</html>
Client-side checking can still be performed for legacy browsers by adding an onsubmit handler to the form tag or an onclick handler to the submit button.
Editable Content
Not just form fields but any element can be marked as editable. How this works for any given HTML element is up to each browser maker. A small bit of experimentation shows that content editable list elements have the best cross-browser consistency. Try this simple example:
<ol contenteditable onblur="alert(this.innerHTML);"> <li> </li> </ol>
It will echo back whatever you entered in the list when you click somewhere else on the page or otherwise transfer focus from the list and fire the onblur handler. The alert function in the handler can be replaced with a custom JavaScript function to do much more interesting things with the visitor’s input.
Media Sanity
HTML5 at least takes steps in this direction. Instead of a mash of object, embed, and param elements relying on a plugin player, HTML5’s video element is a simple container with the content serving as a fallback strategy:
<video src="test.mp4" width="400" height="300" controls> Uh, Oh. Your browser doesn’t support HTML5 video. </video>
The HTML5 audio element works similarly. These media elements can also be coded with multiple fallback content to encompass just about every combination of browser, OS, device, and media codec. The people at Camen Design have put together just such a framework for video called Video For Everybody, the idea being to use the HTML5 video element as a wrapper with one or more source tags for the various browsers and codecs. That’s followed by object and embed elements for Flash and other plugin-based players.
Finally, if all else fails, instructions for downloading the media file and playing it offline. While this approach seems to complicate media matters even more, there’s an alternative: You can install a free script from HTML5Media on your web server, which enables the HTML5 video and audio elements to work with most media formats in most major browsers.
Smoother Scripting
DHMTL is finally dead. DHTML or Dynamic HTML was a collection of scripting techniques (hacks, really), browser detection, and CSS that developers invented to animate web pages at the end of the last century. Because HTML4 addressed ECMA scripting languages generally but provided few specifics, each browser had its own rules governing the behavior of document elements. This messy situation has improved with the advent of scripting “frameworks” such as jQuery, Prototype, script.aculo.us, and MooTools, but the HTML5 specification takes it a step further by explicitly defining the properties and methods each HTML element supports and how that element should behave in response to events. This becomes even more important as we deal increasingly with web devices that recognize taps and swipes instead of clicks and drags.
Web Storage
While not part of the core specification, web storage is considered part of the HTML5 feature bundle and draws upon HTML5’s strong scripting support. Web storage avoids some of the problems associated with HTTP cookies. It has two parts: local storage and session storage, which allow the web developer to write code instructing browsers to store and retrieve named data items using the simple JavaScript methods: getItem(name) and setItem(name, value).
There is a session storage object associated with each web site opened in a browser session. This neatly avoids the problem of cookie leakage that occurs, for instance, when you are trying to buy airline tickets for different trips from the same website in different browser windows.
There is a local storage object associated with every page that persists across sessions. Using the previous example, we can write a simple onblur handler for the content editable list that stores the user’s entry:
<ol
onblur="localStorage.setItem('mylist', this.innerHTML);"
contenteditable>
<li> </li>
</ol>
The saved data item is available whenever the page is subsequently reloaded or opened. If the same page is opened in second window, it gets a copy of the stored object that can then be changed independently of the first. If all windows are then closed, the browser will remember the items from the last window that was open. Unlike cookies, web storage objects are not sent to the server with each browser request. This makes local storage suitable for large data objects such as a user’s email inbox that can be refreshed by an AJAX request when the user clicks or taps a button.
Geolocation
Web pages can know where you are if you give your device permission to divulge your location. HTML5 provides a JavaScript API that allows a page script to ask for the device’s latitude, longitude, altitude, and other location information. The data can be a rough guess based on a desktop computer’s IP address or precise GPS data from an iPhone or Android smartphone. Geolocation data can be used to initialize forms or to load localized content for the site visitor. It also provides the basis for communicating with the growing number of mobile location-based services.
Final Thoughts
There are many different way to develop web sites and pages. If you code HTML by hand, adopting the new HTML5 elements is simple. If you use a WYSIWYG editor, check the software company’s website to see if there’s an update or plugin that incorporates HTML5. Dreamweaver users can download the recent released Adobe CS5 HMTL5 Pack to add HTML5 elements and attributes to Dreamweaver’s editor.
Whatever tools you use, HTML5 provides a richer approach to designing web pages that will be more pleasing to humans and robots. HTML5 makes web programming more fun. The time to start working with it is now.