HTML5


(Under development)

We present an introduction to the next version of HTML, called HTML5 or, sometimes, HTML.

HTML5 is being developed jointly by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), an industry consortium.

HTML5 is intended to achieve the following goals (paraphrased):

HTML5 comes with both HTML and XHTML versions.

HTML5 is under active development and much of it is implemented in modern browsers, all of whose developers have committed to implementing all of it. Of course, there is still disagreement between corporations about how to do this and best achieve their commercial interests.

References

Definitive

Tutorial

Summary

HTML5 improves on HTML 4.01 in the following areas:

Some of these improvements can be seen in this starter template from Woods's tutorial. (View the page source to see the improvements.)

Simplification

Semantic markup

Form support

These specific types and attributes facilitate client-side input validation. Much input validation can now be done automatically on form submission. To turn automatic validation off, use the attribute novalidate in the form element.

See details-html5 as an example.

Interaction support

A new canvas element enables Web applications, using JavaScript to generate and display static and animated images, and to interactively respond to user events enabling truly interactive applications, for entertainment, education and so on.

Both drawing and event-handling is done using JavaScript in a Java/Swing-like way.

Here are two introductions to the set of JavaScript functions used to draw on a canvas surface:

This is a more definitive specification:

The HTML5 designers hope that canvas will make the use of Flash unnecessary for interactive applications.

This caused a massive commercial fight between Apple (HTML5 advocate) and Adobe (Flash publisher) in particular. HTML5 advocates seem to be winning, as Adobe has withdrawn the use of Flash from mobile devices, and the future of Flash on desktop devices is now in doubt.

Multimedia support

HTML 4.01 provided a standard way of rendering image files in HTML documents using the img element. It did not provide a standard way of rendering audio or video files.

HTML5 provides a standard way of rendering audio files in HTML documents using the audio element and a standard way of rendering video files in HTML documents using the video element.

Rendering both audio and video is complicated by the existence of competing formats for audio and video files.

A simple audio element could have the form:

<audio src="iwillsurvive.mp3 controls preload="none"></audio>
A more complex and more useful audio element could have the following form:
<audio controls
  <source src="iwillsurvive.ogg" type="audio/ogg">
  <source src="iwillsurvive.mp3" type="audio/mpeg">
  <object type="application/x-shockwave-flash"
   data="player.swf?soundFile=iwillsurvive.mp3">
     <param name="movie"
            value="player.swf?iwillsurvive.mp3">
     <a href="iwillsurvive.mp3">Download the song</a>
  </object>
</audio>

This will play an Ogg Vorbis file if the browser supports audio and the Ogg Vorbis format; it will play an MP3 file if the browser supports audio and the MP3 format; it will play an MP3 file if the browser has the Flash plug-in installed; else it will display a link to an MP3 file.

The video element is similar:

<video controls width="480" height="320" poster="placeholder.jpg">
  <source src="movie.webm type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <object type="application/x-shockwave-flash"
          width="480" height="320" 
          data=player.swf?file=movie.mp4">
    <param name="movie"
           value="player.swf?file=movie.mp4">
    <a href="movie.mp4">Downlaod the movie</a>
  </object>
</video>

Large corporations are currently fighting a bloody war (excuse the hyperbole) over the choice of audio and especially video formats.

Local storage support

HTML5 provides a mechanism for storing large volumes of (structured) data locally, significantly generalising cookies. Such data is associated with a single computer, a single browser and a single domain, but it can be shared between multiple windows and tabs. The two main properties of a the Window object that allow this are localStorage and sessionStorage.

For example, one might use these in a script as follows:

var name = localStorage.username;	 // Query a stored value. 
name = localStorage["username"];	 // Array notation equivalent 
if (!name) {
    name = prompt("What is your name?"); // Ask the user a question. 
    localStorage.username = name;	 // Store the user's response.
}

// Iterate through all stored name/value pairs 
for(var name in localStorage) {	         // Iterate all stored names
    var value = localStorage[name];	 // Look up the value of each one
}

JavaScript support

HTML5 defines a complete, consistent set of JavaScript APIs so that all browsers can define the behaviour of HTML documents using JavaScript in the same way.

Invalid document support

Most HTML documents on the Web are invalid. It's a sad fact of life. Currently, different browsers display invalid HTML documents differently. Why not? The HTML 4.01 standard doesn't define how invalid documents should be rendered. This is a major cause of inconsistencies between browsers.

The HTML5 standard does define how invalid documents should be rendered. This is the major reason that the standard is so long.

Fortunately, Web application designers can ignore this; they just have to design valid documents! Only browser developers need to be concerned with this aspect of the standard. Users benefit because different browsers now render invalid HTML5 documents similarly.

Obsolete features

Many elements are obsolete, e.g., applet, acronym, bgsound, big, center, frame (etc.), basefont, blink, center, font, tt, u, others.

Many presentational attributes are obsolete, e.g., bgcolor, cellspacing, cellpadding, valign, others.

See the W3 specification for a complete list.

Using HTML5 now

HTML5 is not a monolithic standard; it is a collection of independent features. Different browser vendors have implemented different subsets of HTML5 features.

Many features have fallback features; so they can be used together with HTML 4.01 equivalents.

It's also possible to test for the existence in the browser of specific HTML5 elements and attributes, either using a tool like Modernizr, or by explicitly testing for the presence of a feature with JavaScript. We'll look at how to do this after we have introduced JavaScript.

Some browsers (currently) do not apply default styling to new HTML5 elements, so authors at least need to declare that new structural elements should force a line break:

section, article, header, footer, nav, aside, hgroup {
  display: block;
}

Some additional work needs to be provided (at present) for older versions of Internet Explorer.