The developer’s guide to the HTML5 APIs
Rich Clark, one of the HTML5 Doctors, gets under the hood of the APIs that form the bulk of the HTML5 spec and tells us about their purpose and progress
Whilst we see, read and hear a lot about the new semantic elements in HTML5 we arguably hear far less about the application programming interfaces (APIs) that make up a large part of the specification itself.
As I’m sure you’re aware that there are two versions of the HTML5 specification, one published by the W3C and another by the WHATWG. The living HTML specification maintained by the WHATWG contains additional APIs to those in the W3C HTML5 spec (although generally they are also maintained by the W3C but in separate specifications).
Alongside those in the specification are a number of related APIs that form part of the standards stack and are often grouped under the “HTML5″ umbrella term. In some cases the APIs have been around and implemented for a while, but they’ve never been documented; something which HTML5 has set out to change.
In this article we’re not going to look at code but instead we’ll focus on describing the APIs, their purpose and progress. We’ll then point you in the right direction to find out more.
APIs in the HTML5 specification
We’ll start by looking at the APIs in the W3C HTML5 spec.
To find out more, take a look at the following articles.
Media Elements, W3C
Everything you need to know about HTML5 video and audio, dev.opera, Simon Pieters
HTML5 audio and video: what you must know, NetTuts (a chapter from Introducing HTML5), Bruce Lawson and Remy Sharp
Text Track API
The text track API leads on nicely from the media API. It is designed to allow us to interact with text tracks (subtitles or captions for example) for the audio and video elements.
You can return the number of text tracks and their length associated with a media element, the kind of text track (subtitles, captions, descriptions, chapters and metadata), language, readyState, mode and label.
This API will have far more support when browsers begin to implement native subtitling, using WebVTT for example. In the meantime, to get up to speed, look at these resources:
Text Track API, W3C
Web Media Text Tracks Community Group
Media Multiple Text Tracks API Wiki, W3C
The YouTube Caption API, Speech Recognition, and WebVTT Captions for HTML5, Google I/O 2011, Naomi Black, Cynthia Boedihardjo, and Jeffrey Posnick
WebVTT and video subtitles, Ian Devlin
Video subtitling and WebVTT, HTML5 Doctor, Tom Leadbetter
Drag and Drop
The drag and drop API has been the topic of much debate. Originally created by Microsoft in version 5 of Internet Explorer, it is now supported by Firefox, Safari and Chrome. So what does it do?
Well, as the name suggests, it brings native drag and drop support to the browser. By adding a draggable attribute set to true, the user has the ability to move any element. You then add some event handlers on a target drop zone to tell the browser where the element can be dropped.
The API’s real muscles are flexed when you start to think outside of the browser. Using drag and drop, a user could drag an image from the desktop into the browser or you could create an icon that gets loaded with content when dragged out of the browser by the user to a new application target.
Drag and Drop is covered in depth in the below articles.
Drag and drop API, W3C
Native, Drag and Drop, HTML5 Doctor, Remy Sharp
Drag and Drop, MDN
The drag and drop API, HTML5 Laboratory, Ian Devlin
Offline Web Applications/Application Cache
With the blurring of native apps (mobile and desktop) and web apps comes the inevitable task of wanting to take our applications offline. The Offline Web Applications specification details how to do just that using application caching.
Application caching is carried out by creating a simple manifest file which lists the files that are required for the application to work offline. Authors can then ensure their sites function offline. The manifest causes the user’s browser to keep a copy of the files for use offline later. When a user views the document/application without network access, the browser switches to use the local copies instead. So in theory, you should be able to finish writing that important email or playing the web version of Angry Birds while you’re on the underground/subway.
With relatively strong browser support, particularly in the mobile arena (Firefox, Safari, Chrome, Opera, iPhone, and Android), it’s something you can start using right now. For further reading, I suggest:
Offline Web Applications, W3C
Let’s take this offline, Dive into HTML5, Mark Pilgrim
Running your web applications offline with HTML5 AppCache, dev.opera, Shwetank Dixit
Go offline with application cache, HTML5 Doctor, Mike Robinson
Offline Browsing in HTML5 with ApplicationCache, Sitepoint, Malcolm Sheridan
Get off(line), Web Directions, John Allsopp
Like offline, user interaction is part of the primary HTML5 specification. It’s worth mentioning here because some of its features, such as the contenteditable attribute, are extremely useful when you’re creating web applications. contenteditable has been around in internet Explorer since version 5.5 and works in all five major browsers. Setting the attribute to true indicates that the element is editable. Authors could then, for example, combine this with local storage to track changes to documents.
For more information, take a look at the current spec but note that some sections have been moved to the HTML Editing APIs work in progress.
A browser’s back button is the most heavily used piece of its chrome. Ajax-y web applications break it at their peril. Using HTML5′s History API, developers have a lot more control over the history state of a user’s browser session.
The pre-HTML5 History API allowed us to send users forward or back, and check the length of the history. What HTML5 brings to the party are ways to add and remove entries in the user’s history, hold data to restore a page state and update the URL without refreshing the page. The scripting is fairly straightforward and will help us build complex applications that don’t refresh the page from which we can continue to share URLs as we’ve always done.