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.
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.)
<!DOCTYPE html>
<meta charset="utf-8">
<script src="js/html5.js"></script>
article, section,
header, footer, nav,
aside.
time,
meter, progress.
hCard (contacts),
hCalendar (events), hAtom (blog entries).
search
email, url, tel
datetime, datetime-local, date,
time, month
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.
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.
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.
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
}
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.
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.
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.
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.