No doubt you’ve heard of HTML5; but you probably haven’t seen a clear, accurate explanation of what it is, what it contains and what it can do. The term HTML5 is widely misused as an umbrella term for all sorts of technologies, some of which have no connection to the standard at all. If this has left you a little confused, it’s understandable.
In the following article, we’ll give an introduction to HTML5, showing you what it consists of and what you can do with it, and we’ll create a simple web page using HTML5 mark-up. We’ll also look at other technologies mistakenly referred to as “HTML5 technologies”.
WHAT IS HTML5?
In a nutshell, HTML5 is the latest version of HTML – the language in which web pages are written. HTML5 introduces new elements, updates the meaning of others and deprecates a handful. The HTML5 specification also defines new JavaScript features that can be used in conjunction with new HTML elements.
Unlike previous versions of HTML, HTML5 wasn’t created by the World Wide Web Consortium (the W3C). Its origins lie with the independent Web Hypertext Application Technologies Working Group (WHATWG), formed in 2004 by delegates from Apple, Mozilla and Opera who disagreed with the W3C’s vision of XHTML as the future of the web. The WHATWG created proposals to develop the web as a platform for applications – and within a few years the W3C adopted these proposals. The two organisations now develop and maintain HTML5 together.
It’s worth noting that each organisation has its own version: although the two are very similar, the WHATWG’s is a “living document” that’s regularly tweaked, while the W3C’s is maintained through more formal processes.
NEW ELEMENTS IN HTML5
Many of the updates HTML5 brings are intended to make life easier for developers. A case in point is the HTML5 use of DOCTYPE. Prior to HTML5, the syntax you had to use to tell the browser what sort of HTML you were using was unfriendly, to say the least; for example, the first line of an HTML 4.01 page might be:
<!DOCTYPE HTML PUBLIC “-//W3C/
DTD HTML
4.01 Transitional//EN”
“http://www.w3.
org/TR/html4/loose.dtd”>
To specify HTML5, you simply need to define:
<!DOCTYPE html>
HTML5 also includes a new “charset” element that defines the character encoding of your web page – a useful feature on the increasingly multilingual web. For example, to define the default character encoding of your page as UTF-8, you can simply place the following line within the head element:
<meta charset=“utf-8”>
NEW SEMANTIC ELEMENTS
HTML5 also focuses on making code easier to understand, navigate and customise. To this end, it includes several new semantic elements. Since many web pages have headers and footers, the HTML5 specification includes new <header> and <footer> elements specifically for enclosing content intended for these roles. This makes it easy to customise styles, and parse and process pages containing headers and footers.
Similarly, a common feature of web pages is a list of navigation links. Again, the HTML5 specification defines a new <nav> element to enclose lists of navigation links.
When it comes to the main content of a web page, the <article> and <section> elements can be used to enclose content and give it a particular semantic meaning. To get an idea of how these elements can be used, consider a newspaper with several sections, such as news, sport and entertainment. Each section contains a number of articles that are related by the section heading, but each of which can also stand on its own.
NATIVE MULTIMEDIA
One of the most important – and most talked about – things that HTML5 allows you to do is build multimedia directly into your web pages. Previously, in order to add an audio or video file to a web page, you had to use an <object> or <embed> element to call a third-party plugin such as Adobe Flash to play the file. This required that the plugin in question was installed and working on the end user’s machine – something that can’t be taken for granted.
HTML5 introduces two new elements – <audio> and <video> – that you can use to play multimedia files natively in the user’s web browser. These elements can take a number of attributes that allow you to do such things as instruct the browser to use its default control set, to loop the audio/video, and to play the media automatically.
All the major browsers can handle these new media elements, but there are many media formats out there, and not every platform supports all of them. The HTML5 specification initially specified that the Ogg Vorbis audio and Ogg Theora video formats must be supported by all browsers, but this was dropped after objections by some browser developers. As a result, if you want to ensure your media files will work in multiple browsers, you must provide your audio and video files in multiple formats.
This isn’t as troublesome as it may sound. For audio, Firefox supports Ogg Vorbis and WAV; Safari supports MP3, AAC, WAV and MP4; Opera supports Ogg Vorbis and WAV; and Internet Explorer 9 supports MP3, AAC and MP4. To make HTML5 audio playable in all the major browsers, you need only provide your files in both Ogg Vorbis and MP3 formats.
It’s a similar situation with video. Firefox supports Ogg Theora and the royalty-free WebM format (from version 4+); Safari supports MP4/H.264; Opera supports WebM; and Internet Explorer 9 supports MP4/H.264. So again, you need only provide video files in two formats – WebM and MP4/H.264 – for support across all modern HTML5-capable browsers.
Since you need to provide multiple sources for your multimedia files, HTML5 provides a new element, <source>, which is used to specify a source for an embedded audio or video file. A section of code that embeds video in two different formats might read:
<video controls>
<source src=“myVideo.webm”
type=“video/webm”>
<source src=“myVideo.mp4”
type=“video/
mp4”>
</video>
In addition to the elements for embedding media files, HTML5 also defines a set of JavaScript functions – known as the Media API – that can be used to control and interact with the media being played.
The Media API lets you create and style custom media player controls via standard HTML and CSS, and hook them up to the audio and video, to work in the same way as the browser’s default control set. For a detailed look at HTML5 multimedia, its capabilities and the Media API in particular, check out my book HTML5 Multimedia: Develop and Design, published by Peachpit.
FORMS
Forms are a fundamental website element. Whether they’re used for contacting someone, providing feedback or ordering products, forms (and the input fields they contain) are key to web development. HTML5 hasn’t neglected forms by any means: it brings new features and enhancements that make form creation easier and more useful.
The HTML5 specification defines a number of new input types, in addition to the familiar text input field. Fields can now be given specific input types, with options including an email address, a telephone number, a date, a URL, a time, a number and even a colour. Most browsers currently do nothing special with these input types, but in the future it will be possible to handle these fields in different ways – for example, by offering a mini-calendar for fields whose input type is set to date (Opera already does this), or a colour selector for the colour input type.
New attributes also allow you to mark an input field as required; to fill with placeholder text; or even to specify a data type or regular expression pattern that the input field’s content must match. This makes it possible to perform in-browser input validation, where invalid input is instantly rejected, with an appropriate error message, before the form is submitted. This will greatly help developers, who currently have to create their own routines to validate user input.
JAVASCRIPT APIS
As we’ve mentioned, the HTML5 specification contains a number of JavaScript APIs. One of the most talked-about aspects of HTML5 is the new <canvas> element – but on its own this does nothing more than define a drawing area on a web page. The real work is done by the new 2D JavaScript API, which enables you to draw and manipulate graphics dynamically within a web page. Strictly speaking, the 2D API isn’t part of HTML5 – due to its complexity it’s defined in a separate standard of its own – but it’s part and parcel of the modern HTML5 environment.
The 2D JavaScript API provides you with a wealth of functions, such as drawing shapes, filling colours, creating gradients and patterns, rendering text, drawing graphs and charts, manipulating images and exporting canvas contents to a static file. The range of features is extensive enough to build complex applications and even fast-moving games: there’s an ever-growing community dedicated to creating in-browser apps, such as those you’ll find in the Chrome web store (http://chrome.google.com/webstore).
BEYOND COOKIES: LOCAL AND SESSION STORAGE
In older versions of HTML, the normal way for a website to “remember” details about a user is by storing a cookie – a small packet of data – on the local PC, which can then be read back when the user returns to the site. For security reasons, some cookie values last only until the user logs out or closes the browser. Others are intended to persist every time a user visits a particular website; but these must still specify an expiry date.
HTML5 provides a JavaScript API that defines two new methods of storing such data, known as sessionStorage and localStorage. Setting a value in sessionStorage indicates that the value will persist only until the end of the session, while a value in localStorage will persist indefinitely. This makes the storage of data much easier for developers.
It’s also possible to store more data through these APIs than was possible with cookies. A traditional HTML site is limited to storing 20 cookies of 4KB each in the user’s browser. With localStorage and sessionStorage, 5MB is available, so large amounts of data – such as email or calendar archives – can be stored locally, for local processing or offline reference.
This ties in to another new feature of HTML5 – offline applications. It’s possible for developers to define an offline cache of a site for the browser to store and manage. This way, web apps can remain available even when there’s no network connection – such as when you’re on a plane or an underground train.
DRAG AND DROP
Back in 1999 (believe it or not), Microsoft added drag-and-drop capabilities to Internet Explorer 5, so that a web page could react when one element was dragged over another. Apple subsequently added this API to Safari, and now it’s been incorporated into the HTML5 specification. Almost all HTML5-capable browsers support the drag-and-drop API, the notable exception being Opera.
WHAT ISN’T IN HTML5
As mentioned above, there are a number of technologies that are often lumped under the umbrella of “HTML5 technologies”, but which aren’t part of the HTML5 specification. Some are linked to new features of HTML, such as the JavaScript APIs mentioned above. Others are quite separate from what HTML5 really is.
Geolocation, for example, is achieved through a JavaScript API that allows you to pinpoint a user’s location with device technologies such as GPS, Wi-Fi, and phone cell information. This API can be useful for application-type websites, but it isn’t a part of HTML5, and never has been.
CSS3 – the latest version of the Cascading Style Sheets specification – makes it easy to implement a wide range of visual styles and layouts for web page elements. It also includes the @font-face construct, which allows web designers to embed custom fonts in pages, to create striking and distinctive typographic layouts. Again, it isn’t part of HTML5, but a separate standard.
Similarly, “web workers” – bits of JavaScript code that run in the background, while the user continues interacting with the browser in the foreground – might be associated with the sort of website that makes use of HTML5. However, their behaviour and use is defined in a completely separate WHATWG specification.
A final idea that’s sometimes conflated with HTML5 is “responsive web design” – a term coined by Ethan Marcotte to describe how a web design can be made to respond to users’ device size and capabilities. A site following this principle might indeed be implemented using HTML5; but that’s as close as the ideas get.
NEXT PAGE: HTML and Internet Explorer, Where to go from here, Further reading...
HTML5 AND INTERNET EXPLORER
With the arrival of Internet Explorer 9, Microsoft’s browser has finally caught up with HTML5. However, there are many users still using older versions of the default Windows browser, and missing out on some of the new HTML5 capabilities. Happily, some of them can be made to work using JavaScript.
IE disregards HTML elements that it doesn’t understand, so if your page uses new HTML5 elements such as <header>, <footer> and <nav>, these will, by default, be ignored. But it’s possible to use a script to tell IE about these elements before it encounters them. The good news is that some helpful souls at Google have made the script (written by Remy Sharp) freely available. You can implement it by adding the following lines within the head section of your web page:
<!--[if lt IE 9]>
<script src=“//html5shim.
googlecode.com/svn/trunk/html5.js”></
script>
<![endif]-->
Through the use of conditional comments, the above script will only be loaded in IE below version 9, and will enable you to use and apply styles to the new elements.
You also need to supply default styling for the new HTML5 elements so that they’re correctly displayed as “block”, so add this to your style declarations:
article, aside, figure, footer,
header, hgroup, menu, nav, section
{ display:block; }
(This is also required for older versions of HTML5-capable browsers.)
Older versions of IE also lack support for media embedding via the <audio> and <video> elements. But you can write code that will fall back to using an embedded player, using Adobe Flash or any other third-party tool, in a non-HTML5 browser: simply add the fallback code after the HTML5 source definitions for audio or video. An example using a locally hosted Adobe Flash player is given below:
<audio controls>
<source src=“myAudio.ogg”
type=“audio/ogg”>
<source src=“myAudio.mp3”
type=“audio/mp3”>
<object
type=“application/x-shockwave-flash”
data=“player.swf?audioUrl=myAudio.
mp3”>
<param name=“movie” value=“player.
swf?audioUrl=myAudio.mp3”>
</object>
</audio>
If you don’t want to provide a Flash fallback, a link to the file could be provided in place of the Flash object definition.
Not all HTML5 features can be replicated or worked around in this way, but you can use JavaScript to detect which features the user’s browser supports, enabling you to present an error page or a simplified version of your content as required. The Modernizr JavaScript library makes it simple for you: full documentation and examples can be found at www.modernizr.com. If you want to check whether a feature (be it HTML5, CSS3 or such like) is supported in a specific browser, you’ll find a guide at http://caniuse.com.
HTML 4.01 vs. HTML5
Above is the framework for a basic website – with a heading, a navigation menu, some article content and a footer – in HTML 4.01 (left) and HTML5 (right). The illustrations (top) show the arrangement of elements.
In the code on the left, the unwieldy HTML 4.01 header is replaced with the simpler HTML5 version. The type attribute isn’t needed for the link stylesheet and script elements. In the second section, the divs with the “header” and “nav” classes are replaced with native HTML5 elements.In the main body of the HTML 4.01 website, a “content” div contains an “article” div; in HTML5, this inner div is replaced with an article element in HTML5.
The time element is used to wrap the publication date of the article – this isn’t natively supported in HTML 4.01. Finally, the “footer” div at the bottom of the page is implemented in HTML5 using the native footer element, and copyright information is wrapped in a small element.
WHERE TO GO FROM HERE
As yet, no browser implements the complete HTML5 specification: test your browser at http://html5test.com to see how many HTML5 features it supports. (The test also covers features such as geolocation and web workers, which, as we’ve mentioned, aren’t HTML5.)
But the most important features are already supported across all major browsers; so there’s no reason you shouldn’t follow companies such as Apple, Google and Twitter and create your next project in HTML5 (unless you’re targeting older versions of Internet Explorer – see HTML5 and Internet Explorer, p87). The features we’ve mentioned are by no means a comprehensive list. There are a host of books and online resources where you can learn more – see Next steps, below, for suggestions.
FURTHER READING
Books
• Introducing HTML5: Second Edition, Bruce Lawson and Remy Sharp
• HTML5 Multimedia: Develop and Design, Ian Devlin
• Foundation HTML5 Canvas: For Games and Entertainment, Rob Hawkes
• Dive Into HTML5, Mark Pilgrim
Online resources
• HTML5 Doctor
• Planet HTML5
• HTML5 Demos
• Dive Into HTML5
• HTML5 Specification for Web Developers
