Productivity

How HTML5 Will Change The Way You Use The Web

Firefox and Safari partially support it, Google’s Wave and Chrome projects are banking on it, and most web developers are ecstatic about what it means. It’s HTML5, and if you’re not exactly sure what it is, here’s an explainer.

Image taken from Bruce Lawson’s fantastic HTML5 presentation.

What is HTML5? Some kind of really fancy link tag?

HTML5 is a specification for how the web’s core language, HTML, should be formatted and utilised to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

What Awesomeness ca I expect from HTML5?

The big, marquee changes in HTML5 have already made some headlines, thanks to browser makers like Google, Apple, Mozilla, and others picking them up and implementing them. The shortlist:

  • Offline storage: Kind of like “Super Cookies,” but with much more space to store both one-time data and persistent app databases, like email. Actually, you can think of offline storage as something a lot like Google Gears—you just won’t need to install a plug-in to reap the benefits.
  • Canvas drawing: Sites can mark off a space on a page where interactive pictures, charts and graphs, game components, and whatever else imagination allows can be drawn directly by programming code and user interaction—no Flash or other plug-ins required.
  • Native video and audio streaming support: It’s in the very early stages and subject to format disruption, but sites like YouTube and Pandora could one day skip Flash entirely to bring you streaming audio and video, with timed playback and other neat features.
  • Geolocation: Just what it sounds like, but not limited to a single provider’s API or browser tool. HTML5 can find your location and use it to tailor things like search results, tag your Twitter updates, and more.
  • Smarter forms: Search boxes, text inputs, and other you-type-here fields get better controls for focusing, validating data, interacting with other page elements, sending through email, and more. It may not sound that sexy, but it could mean less annoyance as a user, and that’s always a good thing.
  • Web application focus: Without breaking down the hundreds of nuts and bolts, it’s fair to say that HTML5 is aimed at making it easier to build wikis, drag-and-drop tools, discussion boards, real-time chat, search front-ends, and other modern web elements into any site, and have them work the same across browsers.

Where can I see HTML5 in action?

Ooh, good question!

From this page right here, with a soon-to-be-optional-maybe-Flash, you can check out these video demonstrations:

Google I/O 2009 Keynote, pt. 1

Firefox 3.5 Treats Videos Like Web Pages:

If you’re running an up-to-date version of Firefox, Safari, Chrome, or Opera—or, basically, any regularly updated browser besides Internet Explorer—give these links a shot.

HTML5 Demos: Huge list of capability demonstrations, gracefully compiled by Remy Sharp.

Welcome to Safari: Written entirely with HTML5 and CSS 3.

YouTube in HTML5: No Flash required at all (for Chrome and Safari only, at this point).

Canvas drawing and audio

Neat interactive site that shows tweets from folks who are digging on HTML5, with streaming background audio and interactive data pieces.

Why is it being pushed? Don’t Flash and JavaScript already work?

Make no mistake, HTML5 has much love for JavaScript and its many relatives—in fact, the new markup standards make it easier for JavaScript-type code to point at, and pull from, pieces of each web page. As for Flash, and Silverlight, and other browser plug-ins, well, they are artificial solutions for a natural problem that HTML5 is trying to fix: Placing and managing interactive elements on a web page.

Besides being a major source of browser memory leaks and crashes, Flash and its brethren also doesn’t work on every platform, and has to be re-written and adapted for every new one. If you’re looking to make a clever application available to as many people as possible, a write once, use everywhere system is ideal. When more browsers and developers support HTML5′s audio, video, and interaction standards, the idea of the web as the universal app store—for smartphones, for desktops and laptops, Windows, Mac, and Linux—gets closer to reality.

Apple tried to pitch this mentality to developers with their first iPhone release. That pronouncement was, to put it mildly, roundly mocked. Since then, webapps have become a lot more powerful and respectable as mainstays of productivity, and enthusiasm for the walled garden model of application markets has waned quite a bit in the minds of an increasing number of developers.

That’s not to say that HTML5-powered web applications, with their lack of serious local storage, hardware access, and serious offline capabilities, are going to make the iPhone App Store, the Android Market, or the desktop software we’re all used to obsolete. But look at how Chrome is positioning its Chrome OS for netbooks, which relies on HTML5 for offline storage: A secondary computer, in terms of hard-and-fast capabilities, but one you might use just as often, if not more, for the web-connected convenience.

How will HTML5 makes its way onto my web?

HTML5 isn’t a software release, or a web development law. It’s a voted-upon and group-edited standard, written in broad fashion to accommodate different styles of development and the different thinking among web browser makers.

Put more simply, it depends on what you’re using to surf. And what standards your web makers are following.

Firefox, Safari and Chrome on the desktop support a few of the styles and features outlined in HTML5′s draft specifications, like offline storage, canvas drawing, and, most intriguingly, tags for audio and video that allow sites to stream multimedia files directly into a browser. Apple’s Safari for iPhone and the Android browser also support elements of HTML5, as does Opera Mobile. Want to know the nitty-gritty of where your browser stands on HTML5? Web geeks have put in the time to put it all in a Wikipedia chart.

Those audio and video tags aren’t quite as liberating as they may seem. The writers of the HTML5 standard—Ian Hickson of Google and Davd Hyatt of Apple—wanted to define a single, standardised format for video streaming, but while their employers favour the H.264/MPEG-4 standard, open-source firms like Mozilla can’t abide by its patent “encumbrance”, and Opera and other web firms don’t particularly love the licensing costs. Their alternative is Theora, better known (relatively) as Ogg Theora. As it stands, HTML5 simply doesn’t require or suggest a single container format or codec to use, which could mean browser-by-browser differences down the road. Ars Technica has a good explainer on the HTML5 video codec debate.

Further reading

If you’re already savvy with HTML5, what differences or improvements would you point out that we left out? Tell us what HTML5 means to you, and your browser, in the comments.


Have you subscribed to Lifehacker Australia's email newsletter? You can also follow us on Facebook, Twitter and YouTube.