Help
HTML 5 is the newest revision of the Hypertext Markup Language. This excerpt from Jennifer Niederst Robbins' HTML & XHTML Pocket Reference gives you an overview of what HTML 5 has to offer.
HTML5, which aims to make HTML more useful for creating web applications as well as semantically marked up documents, is not yet a formal Recommendation as of this writing, however, it is beginning to gain browser support and is already being used for web and mobile application development.
HTML5 uses HTML 4.01 and the legacy behavior of browsers as a starting point, using the Document Object Model (DOM, the “tree” formed by a document’s structure) as its basis rather than a particular set of syntax rules. HTML5 can be written with HTML syntax (called the HTML serialization of HTML5) or according to the stricter syntax of XML (XML serialization, or “XHMTL 5”) if XML parsing is required.
Note
Because HTML5 is still in development, the details are changing rapidly. The HTML5 elements and attributes in this book are based on the WHATWG HTML5 Working Draft dated December 9, 2009.
For the most recent version, go to www.whatwg.org/specs/web-apps/current-work/multipage/. For a list of the ways HTML5 differs from HTML 4.01, see dev.w3.org/html5/html4-differences.
HTML5 offers new features (elements, attributes, event handlers, and APIs) for easier web application development and more sophisticated form handling. There are also new semantic elements for marking up page content. Most of the purely presentational or poorly supported elements and attributes in HTML 4.01 have been dropped from HTML5, however, a few have been redefined or reinstated.
Details for each of these elements may be found later in the section the section called “Alphabetical List of Elements”:
article | footer | rp |
aside | header | rt |
audio | hgroup | ruby |
canvas | keygen | section |
command | mark | source |
datalist | meter | time |
details | nav | video |
embed | output | |
figure | progress |
HTML5 introduces the following new input control types
(indicated as values for the type
attribute for the input
element): color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
The Global Attributes and Events available for all elements in HTML5 are listed and described in detail in the the “Common Attributes and Events” section. New HTML5 attributes are listed with their respective elements and labeled HTML5 only in the the “Alphabetical List of Elements” section.
With a growing demand for interactive content on web pages, HTML5 introduces several APIs (Application Programming Interfaces) for standardizing the creation of web applications.
There are APIs for the following:
Two-dimensional drawing in conjunction with the new
canvaselementPlaying video and audio files, used with the new
videoandaudioelementsOffline web applications
Registering applications for certain protocols or media types
Editing documents, including a new global
contenteditableattributeDrag and drop functionality (including the new
draggableattribute)Exposing the browser history and allowing pages to add to without breaking the back button
Cross-document messaging
HTML5 has only one version and does not reference a DTD, but HTML5 documents still require a simplified DOCTYPE declaration to trigger standards mode rendering in browsers. The following is the basic structure of an HTML5 document:
<span class="strong"><strong><!DOCTYPE html></strong></span> <html> <head> <title><em class="replaceable"><code>Document Title</code></em></title> </head> <body> <em class="replaceable"><code>Content of document . . .</code></em> </body> </html>
HTML5 documents written in XML syntax do not require a DOCTYPE but
may include an XML declaration. They should also be served as the MIME
type application/xhtml+xml or
application/xml. The following is a
simple HTML5 document written in the XML syntax:
<span class="strong"><strong><?xml version="1.0" encoding="UTF-8"?></strong></span> <html <span class="strong"><strong>xmlns="http://www.w3.org/1999/xhtml"</strong></span>> <head> <title><em class="replaceable"><code>Document Title</code></em></title> </head> <body> <em class="replaceable"><code>Content of document . . .</code></em> </body> </html>
As of this writing, HTML5 is still in its earliest days and has
only limited browser support. A few features are supported in Firefox
3.5+, Safari 3+, Chrome 2+, and Opera 9+ (Opera supports nearly all of
the HTML5 Forms features). Internet Explorer supports contentEditable, but otherwise has not
promised support for HTML5 in its version 10 release, so we’ll have to
stay tuned a while to see what comes after that. In the meantime,
Javascript can be used to make browsers recognize HTML5
elements.
Many developers are looking to the mobile world as the arena where HTML5 will take hold in the form of web-based applications.
The following resources are useful for tracking HTML5 real-world support and use:
“When Can I Use...” (a.deveria.com/caniuse/): A comparison of browser support for HTML5, CSS3, and other web technologies maintained by Alexis Deveria.
Wikipedia “Comparison of Layout Engines (HTML5)” (en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)): Charts show HTML5 support by the major browser layout engines.
HTML5 Doctor, Helping you Implement HTML5 today (html5doctor.com): Articles about HTML5 development and implementation, curated by Richard Clark, Bruce Lawson, Tom Leadbetter, Jack Osborne, Mike Robinson, and Remy Sharp.
