Where on the Web Is HTML5?

HTML5 does way more than video: Vimeo's Flash-free player showing a clip by Maxime Bruneel.

Unless you’ve been off snorkeling in the Alps, you’ve probably heard all the recent hubbub about HTML5 and its ability to replace Flash as the web’s default video player.

But HTML5 is much more than a hopeful successor to Flash’s web-video crown. In fact, watching a video without a plug-in only scratches the surface of what HTML5 offers.

HTML5 is the next generation of HTML, the language of the web. More than just a markup syntax like its predecessors, HTML5 provides a new set of features designed to make modern web applications work more like desktop applications.

The key features in the HTML5 stack: native video and audio playback, animated graphics, geolocation, hardware acceleration for in-browser events, the ability to keep using a browser-based app even if your internet connection drops, the ability to store application data on your local machine, dragging and dropping of files from the desktop to the browser, and the addition of semantic markup on pages, making them easier for both machines and humans to understand.

Each of the major browsers supports different pieces of HTML5 right now, and we expect to see all browsers on the same page in a year or two. You might think, given variances in browser support, that no one is using the future of the web. But you’d be wrong. HTML5 is everywhere you turn. In fact, some of our favorite web apps are making heavy use of HTML5 — to paraphrase William Gibson, the future of the web is already here, it just isn’t evenly distributed yet.

Did you know that Google’s homepage, one of the most trafficked pages on the web, uses HTML5? Technically, the Google homepage just uses the HTML5 doctype — the rest of the page is actually quite archaic (and invalid) code — but other Google apps take advantage of HTML5 much more.

Gmail, one of the bigger webmail apps on the web, uses HTML5’s offline storage mechanism to allow you to work with your e-mail even when you don’t have an internet connection. Google Docs also uses the HTML5 offline tools, as do the online office suite Zoho and the WordPress blogging system. Check out Mark
Pilgrim’s excellent rundown on how to add offline support to your apps if you want to start using this feature).

Scribd's new document reader: all web standards, no Flash.

Aside from video, HTML5 is replacing Flash in other ways. Document sharing site Scribd recently made a splash by announcing it will be switching its document viewer from Flash to HTML5 and web standards. Scribd is a great example of what is possible when combining HTML5 elements (primarily the Canvas element, which powers animations) with attendant tools like cascading stylesheets. Scribd makes especially nice use of the @font-face element to load fancy fonts, and it uses the new CSS 3 standard to power some animated transitions between pages.

The combination of tools allows Scribd to convert PDF files into pure HTML documents while maintaining the structural layout, fonts, embedded images and layered elements of the original.

Most impressive about Scribd’s new HTML5 features? They even work in IE6. Check out this example, which manages to render even complex mathematical equations in pure HTML.

They came from space, and the W3C spec: Canvas Invaders

While Scribd might have the best implementation of the canvas element we’ve seen, there are plenty of other very cool examples already on the web. The site Canvas Demos has collection of experiments with canvas, showcasing everything from online games to apps like Rainbow, a browser extension that can pull any color out of a website.

Probably the best-known examples of HTML5 on the web are the current video experiments by YouTube and Vimeo. In both cases, the HTML5 versions of the sites are still opt-in, and there’s no code to embed the HTML5 version of a video on your own site, but it’s a start.

Another aspect of HTML5 that browsers are beginning to support is a set of geolocation tools. Technically, the geolocation API is not part of the HTML5 spec, but it is governed by the W3C and will arrive alongside HTML5 the markup spec. Using the geolocation API, a web app running in the browser can obtain your whereabouts, making location-based web searches more relevant.

Click on the little circle above the yellow guy to tell Google Maps where you are.

Google Maps uses it. The site’s interface now offers a small circle icon just below the navigation wheel — click it and maps will zoom to your current location.

At the moment, the geolocation API isn’t widely supported by desktop browsers (only Chrome and Firefox 3.6+), but Google makes a plug-in called Gears which offers a fallback solution for older browsers.

That’s the tactic Twitter uses for its geo-aware tweets, tapping into the geolocation API when it’s available and falling back to Gears when it’s not.

In the end, one of the most powerful changes in HTML5 may not be as flashy as any of the examples listed above. HTML5’s biggest contribution to the web may well end up being its new structural tags, like <header>, <footer>, <section> and <article>.

These new tags allow web authors to better define their content, which means search engines will need to do a lot less guessing when they index the web. That will mean better, more relevant results and faster links to the information you want.

There are countless sites already using HTML5’s new tags, though you’d never know it without viewing the source of the pages. If you’d like to see some examples, head over to HTML5Gallery, which features hundreds of sites using varying degrees of HTML5.

To use the new structural tags on your own site, check out our tutorial on Building Web Pages With HTML 5. And there’s no need to worry; with a little JavaScript helper, these tags will work in any browser.

HTML5 can also be extended to offer even more semantic structure through Microdata. Using standardized data formats (similar in many ways to microformats) websites can offer not only data, but definitions of what that data is.

Ultimately, microdata exists for the benefit of web browsers and search engines. Eventually, search engines could use microdata to find your friends on the web and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using. To experiment with these extensions, head over to Google’s Rich Snippets Testing Tool.

While there’s no question that HTML5 is still in the experimental stage, it’s already gaining traction, and it’s doing a whole lot more than just playing video on your mobile phone.

By Scott Gilbertson
Newscribe : get free news in real time

  See Also:

• Embed Videos in Your Web Pages Using HTML5
• Building Web Pages With HTML5
• Add Semantic Value to Your Pages With HTML5
• Who Needs Flash?