Copyright © 2008 W3C ® ( MIT , ERCIM , Keio ), All Rights Reserved. W3C liability , trademark and document use rules apply.
HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. "HTML 5 differences from HTML 4" describes the differences between HTML 4 and HTML 5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification itself. [ HTML5 ]
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This is a First Public Working Draft produced by the HTML Working Group , part of the HTML Activity . The Working Group intends to publish this document as a Working Group Note to accompany the HTML 5 specification . The appropriate forum for comments is public-html-comments@w3.org , a mailing list with a public archive .
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy . W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy .
HTML has been in continuous evolution since it was introduced to the Internet in the early 1990's. Some features were introduced in specifications; others were introduced in software releases. In some respects, implementations and author practices have converged with each other and with specifications and standards, but in other ways, they continue to diverge.
HTML 4 became a W3C Recommendation in 1997. While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content. The same goes for XHTML 1, which defines an XML serialization for HTML 4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML 5 will replace these documents. [ DOM2HTML ] [ HTML4 ] [ XHTML1 ]
The HTML 5 draft reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content. The draft:
HTML 5 is still a draft. The contents of HTML 5, as well as the contents of this document which depend on HTML 5, are still being discussed on the HTML Working Group and WHATWG mailing lists. Some of the open issues include (this list is not exhaustive):
longdesc , alt and
summary attributes.HTML 5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS.
User agents, however, will always have to support these older
elements and this is why the specification clearly separates
requirements for authors and user agents. This means that authors
can not use the isindex or plaintext
element, but user agents are required to support them in a way that
is compatible with how these elements need to behave for
compatibility with deployed content.
Since HTML 5 has separate conformance requirements for authors and user agents there is no longer a need for marking things "deprecated".
The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification. This is a different approach than previous versions of HTML had. The goal is to ensure that the specification is implementable and usable by designers and developers once it is finished.
The following areas / features defined in HTML 5 are believed to impact the Web architecture:
hidden attribute, the
progress element, et cetera) instead of an add-on
(like the alt attribute).event-source
element).datagrid element.menu and command elements.contentEditable feature and the
UndoManager feature.postMessage API).iframe .The HTML 5 language has a "custom" HTML syntax that is
compatible with HTML 4 and XHTML 1 documents published on
the Web, but is not compatible with the more esoteric SGML features
of HTML 4, such as <em/content/ . Documents
using this "custom" the HTML syntax must be served with the
text/html media type.
HTML 5 also defines detailed parsing rules (including
"error handling") for this syntax which are largely compatible with
popular implementations. User agents must use these rules for resources that have the
text/html media type. Here is an example document that
conforms to the HTML syntax:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
The other syntax that can be used for HTML 5 is XML. This
syntax is compatible with XHTML1 documents and implementations.
Documents using this syntax need to be served with an XML MIME type
and elements need to be put in the
http://www.w3.org/1999/xhtml namespace following the
rules set forth by the XML specifications. [ XML ]
Below is an example document that conforms to the XML syntax of
HTML 5. Note that XML documents must have an XML MIME type
such as application/xhtml+xml or
application/xml .
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
For the HTML syntax of HTML 5 authors have three means of setting the character encoding:
Content-Type header for instance.meta element with a charset
attribute that specifies the encoding as the first element child of
the head element. <meta
charset="UTF-8"> could be used to specify the UTF-8
encoding. This replaces the need for <meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">For the XML syntax authors have to use the rules as set forth in the XML specifications to set the character encoding.
DOCTYPEThe HTML syntax of HTML 5 requires a DOCTYPE to be specified to ensure that the browser
renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional
for XML. Documents with an XML MIME type are always handled in
standards mode. [ DOCTYPE
]
The DOCTYPE declaration is
<!DOCTYPE html> and is case-insensitive in the
HTML syntax. DOCTYPE s from earlier versions
of HTML were longer because the HTML language was SGML based and
therefore required a reference to a DTD. With HTML 5 this is
no longer the case and the DOCTYPE is only
needed to enable standards mode for documents written using the
HTML syntax. Browsers already do this for <!DOCTYPE
html> .
There are a few other syntax changes worthy of mentioning:
lang attribute takes the empty string in
addition to a valid language identifier, just like
xml:lang does in XML.This section is split up in several subsections to more clearly illustrate the various differences there are between HTML 4 and HTML 5.
The following elements have been introduced for better structure:
section represents a generic document or
application section. It can be used together with h1 -
h6 to indicate the document structure.
article represents an independent piece of content
of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only
slightly related to the rest of the page.
header represents the header of a section.
footer represents a footer for a section and can
contain information about the author, copyright information, et
cetera.
nav represents a section of the document intended
for navigation.
dialog can be used to mark up a conversation like
this:
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
figure can be used to associate a caption together
with some embedded content, such as a graphic or video:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
Then there are several other new elements:
audio and video for multimedia
content. Both provide an API so application authors can script
their own user interface, but there is also a way to trigger a user
interface provided by the user agent. source elements
are used together with these elements if there are multiple streams
available of different types.
embed is used for plugin content.
mark represents a run of marked text.
meter represents a measurement, such as disk
usage.
time represents a date and/or time.
canvas is used for rendering dynamic bitmap
graphics on the fly, such as graphs, games, et cetera.
command represents a command the user can
invoke.
datagrid represents an interactive representation
of a tree list or tabular data.
details represents additional information or
controls which the user can obtain on demand.
datalist together with the a new list
attribute for input is used to make comboboxes:
<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
eventsource is used to set up a persistent
connection with a server of which messages (events) can be
received.
output represents some type of output, such as from
a calculation done through scripting.
progress represents a completion of a task, such as
downloading or when performing a series of expensive
operations.
ruby , rt and rb allow
for marking up ruby annotations.
The input element's type attribute now
has the following new values:
datetimedatetime-localdatemonthweektimenumberrangeemailurlsearchcolorThe idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
HTML 5 has introduced several new attributes to various elements that were already part of HTML 4:
The a and area elements now have a
media attribute for consistency with the
link element. It is purely advisory.
The a and area elements have a new
attribute called ping that specifies a space separated
list of URIs which have to be pinged when the hyperlink is
followed. Currently user tracking is mostly done through redirects.
This attribute allows the user agent to inform users which URIs are
going to be pinged as well as giving privacy-conscious users a way
to turn it off.
The area element, for consistency, now has the
hreflang and rel attributes.
The base element can now have a target
attribute as well, mainly for consistency with the a
element (it is also widely supported). Also, the
target attribute for the a and
area elements is no longer deprecated, as it is useful
in Web applications, e.g. in conjunction with iframe
.
The value attribute for the li element
is no longer deprecated as it is not presentational. The same goes
for the start attribute of the ol
element.
The meta element has a charset
attribute now as this was already widely supported and provides a
nice way to specify the character
encoding for the document.
A new autofocus attribute can be specified on the
input (except when the type attribute is
hidden ), select , textarea
and button elements. It provides a declarative way to
focus a form control during page load. Using this feature should
enhance the user experience as the user can turn it off if he does
not like it, for instance.
The new form attribute for input ,
output , select , textarea ,
button and fieldset elements allows for
controls to be associated with a form (e.g. one they are not a
descendant of).
The form and select elements (as well
as the datalist element) have a data
attribute that allows for automatically prefilling of form
controls, in case of form , or the form control, in
case of select and datalist , with data
from the server.
The new required attribute applies to
input (except when the type attribute is
hidden , image or some button type such
as submit ) and textarea . It indicates
that the user has to fill in a value in order to submit the
form.
You can now disable an entire fieldset by using the
disabled attribute on it. This was not possible
before.
The input element has several new attributes to
specify constraints: autocomplete , min ,
max , multiple , pattern and
step . As mentioned before it also has a new
list attribute which can be used together with the
datalist and select element.
The menu element has two new attributes:
type and label . They allow the element
to transform into a menu as found in typical user interfaces as
well as providing for context menus in conjunction with the global
contextmenu attribute.
The style element has a new scoped
attribute which can be used to enable scoped style sheets. Style
rules within such a style element only apply to the
local tree.
The script element has a new attribute called
async that influences script loading and
execution.
The html element has a new attribute called
manifest that points to an application cache manifest
used in conjunction with the API for offline Web applications.
The link element has a new attribute called
sizes . It can be used in conjunction with the
icon relationship (set through the rel
attribute) to indicate the size of the referenced icon.
The ol element has a new attribute called
reversed to indicate that the list order is descending
when present.
The iframe element has two new attributes called
seamless and sandbox which allow for
sandboxing content, e.g. blog comments.
Several attributes from HTML 4 now apply to all elements.
These are called global attributes: class ,
dir , id , lang ,
style , tabindex and title
.
There are also several new global attributes:
contenteditable attribute indicates that the
element is an editable area. The user can change the contents of
the element and manipulate the markup.contextmenu attribute can be used to point to
a context menu provided by the author.draggable attribute can be used together with
the new drag & drop API.hidden attribute indicates that an element is
not yet, or is no longer, relevant.data- * collection of author
defined attributes. Authors can define any attribute they want as
long as they prefix it with data- to avoid clashes
with future versions of HTML. The only requirement on these
attributes is that they are not used for user agent
extensions.HTML 5 also makes all event handler attributes from
HTML 4 that take the form on
event-name global attributes and adds several new
event handler attributes for new events it defines, such as the
onmessage attribute which can be used together with
the new eventsource element and the cross-document
messaging API.
These elements have slightly modified meanings in HTML 5 to better reflect how they are used on the Web or to make them more useful:
The a element without an href
attribute now represents a "placeholder link". It can also contain
flow content rather than being restricted to phrase content.
The address element is now scoped by the new
concept of sectioning.
The b element now represents a span of text to be
stylistically offset from the normal prose without conveying any
extra importance, such as key words in a document abstract, product
names in a review, or other spans of text whose typical typographic
presentation is emboldened.
The hr element now represents a paragraph-level
thematic break.
The i element now represents a span of text in an
alternate voice or mood, or otherwise offset from the normal prose,
such as a taxonomic designation, a technical term, an idiomatic
phrase from another language, a thought, a ship name, or some other
prose whose typical typographic presentation is italicized. Usage
varies widely by language.
For the label element the browser should no longer
move focus from the label to the control unless such behaviour is
standard for the underlying platform user interface.
The menu element is redefined to be useful for
actual menus.
The small element now represents small print (for
side comments and legal print).
The strong element now represents importance rather
than strong emphasis.
The elements in this section are not to be used by authors. User
agents will still have to support them and HTML 5 will get a
rendering section in due course that says exactly how. (The
isindex element for instance is already supported by
the parser.)
The following elements are not in HTML 5 because their effect is purely presentational and therefore better handled by CSS:
basefontbigcenterfontsstrikettuThe following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way:
frameframesetnoframesThe following elements are not included because they have not been used often, created confusion or can be handled by other elements:
acronym is not included because it has created
lots of confusion. Authors are to use abbr for
abbreviations.applet has been obsoleted in favor of
object .isindex usage can be replaced by usage of form
controls.dir has been obsoleted in favor of ul
.Finally the noscript is only conforming in the HTML
syntax. It is not included in the XML syntax as its usage relies on
an HTML parser.
Some attributes from HTML 4 are no longer allowed in HTML 5. If they need to have any impact on user agents for compatibility reasons it is defined how they should work in those scenarios.
accesskey attribute on a ,
area , button , input ,
label , legend and textarea
.rev and charset attributes on
link and a .shape and coords attributes on
a .longdesc attribute on img and
iframe .target attribute on link .nohref attribute on area .profile attribute on head .version attribute on html .name attribute on img and
a (use id instead).scheme attribute on meta .archive , classid ,
codebase , codetype ,
declare and standby attributes on
object .valuetype and type attributes on
param .language attribute on script .summary attribute on table .axis and abbr attributes on
td and th .scope attribute on td .In addition, HTML 5 has none of the presentational attributes that were in HTML 4 as they are better handled by CSS:
align attribute on caption ,
iframe , img , input ,
object , legend , table ,
hr , div , h1 ,
h2 , h3 , h4 ,
h5 , h6 , p ,
col , colgroup , tbody ,
td , tfoot , th ,
thead and tr .alink , link , text and
vlink attributes on body .background attribute on body .bgcolor attribute on table ,
tr , td , th and
body .border attribute on table ,
img and object .cellpadding and cellspacing
attributes on table .char and charoff attributes on
col , colgroup , tbody ,
td , tfoot , th ,
thead and tr .clear attribute on br .compact attribute on dl ,
menu , ol and ul .frame attribute on table .frameborder attribute on iframe
.height attribute on td and
th .hspace and vspace attributes on
img and object .marginheight and marginwidth
attributes on iframe .noshade attribute on hr .nowrap attribute on td and
th .rules attribute on table .scrolling attribute on iframe .size attribute on hr ,
input and select .type attribute on li ,
ol and ul .valign attribute on col ,
colgroup , tbody , td ,
tfoot , th , thead and
tr .width attribute on hr ,
table , td , th ,
col , colgroup and pre
.HTML 5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
canvas element.video and audio elements.contenteditable attribute.draggable attribute.eventsource element.HTMLDocumentHTML 5 has extended the HTMLDocument interface
from DOM Level 2 HTML in a number of ways. The interface is now
implemented on all objects implementing the
Document interface so it stays meaningful in a
compound document context. It also has several noteworthy new
members:
getElementsByClassName() to select elements by
their class name. The way this method is defined it will allow it
to work for any content with class attributes and a
Document object such as SVG and MathML.
innerHTML as an easy way to parse and serialize an
HTML or XML document. This attribute was previously only available
on HTMLElement in Web browsers and not part of any
standard.
activeElement and hasFocus to
determine which element is currently focused and whether the
Document has focus respectively.
getSelection() which returns an object that
represents the current selection(s).
designMode and execCommand() which are
mostly used for editing of documents.
HTMLElementThe HTMLElement interface has also gained several
extensions in HTML 5:
getElementsByClassName() which is basically a
scoped version of the one found on HTMLDocument .
innerHTML as found in Web browsers today. It is
also defined to work in XML context (when it is used in an XML
document).
classList is a convenient accessor for
className . The object it returns exposes methods,
such as has() , add() ,
remove() and toggle() for manipulating
the element's classes. The a , area and
link elements have a similar attribute called
relList that provides the same functionality for the
rel attribute.
The changelogs in this section mostly indicate what has been
changed. Rationale for changes can be found in the public-html@w3.org
and whatwg@whatwg.org
mailing list archives and to some extent in the This Week in
HTML 5 series of blog posts. Many editorial and minor
technical changes are not included in these changelogs. If you are
an implementor of HTML 5 you are hereby strongly advised to
follow the specification more closely.
The changes in the changelogs are in rough chronological order to ease editing this document. The changelogs are placed in reverse chronological order.
The changes since the publication on 10 June 2008 are as follows:
data member of ImageData objects
has been changed from an array to a CanvasPixelArray
object.canvas element and its API.canvas is clarified.canvas
have been made in response to implementation and author feedback.
E.g. clarifying what happens when NaN and Infinity are passed and
fixing the definitions of arc() and
arcTo() .innerHTML in XML was slightly changed to improve
round tripping.toDataURL() method on the canvas
element now supports setting a quality level when the media type
argument is image/jpeg .poster attribute of the video
element now affects its intrinsic dimensions.type attribute of the
link has been clarified.link when the expected
type is an image.href attribute of the
base element does not depend on xml:base
.xmlns attribute with the value
http://www.w3.org/1999/xhtml is now allowed on all
HTML elements.data- * attributes and custom
attributes on the embed element now have to match the
XML Name production and cannot contain a colon.volume on media elements is
now 1.0 rather than 0.5.event-source was renamed to
eventsource because no other HTML element uses a
hyphen.postMessage() .bb has been added. It
represents a user agent command that the user can invoke.addCueRange() method on media elements has
been modified to take an identifier which is exposed in the
callbacks.parent attribute of the Window
object is now defined.embed element is defined to do extension
sniffing for compatibilty with servers that deliver Flash as
text/plain . (This is marked as an issue in the
specification to figure out if there is a better way to make this
work.)embed can now be used without its
src attribute.getElementsByClassName() is defined to be ASCII
case-insensitive in quirks mode for consistency with CSS.localName no longer returns the
node name in uppercase.data- * attributes are defined to be
always lowercase.opener attribute of the Window
object is not to be present when the page was opened from a link
with target="_blank" and rel="noreferrer"
.top attribute of the Window
object is now defined.a element now allows nested flow content, e.g.
a div element, but not itself.header element means to
document summaries and table of contents.canvas
element.autosubmit attribute has been removed from the
menu element.outerHTML and
insertAdjacentHTML() have been added.xml:lang is now allowed in HTML when
lang is also specified and they have the same value.
In XML lang is allowed if xml:lang is
also specified and they have the same value.frameElement attribute of the
Window object is now defined.alt attribute is omitted a
title attribute, an enclosing figure
element with a legend element descendant, or an
enclosing section with an associated must be present.irrelevant attribute has been renamed to
hidden .definitionURL attribute of MathML is now
properly supported. Previously it would have ended up being all
lowercase during parsing.DOCTYPE is
allowed for compatibility with XSLT.replace
attribute, the inputmode attribute and seeding of
values through an external resource.datatemplate , rule and nest
elements).loop
attribute.load() method on media elements has been
redefined as asynchronous. It also tries out files in turn
now.canPlayType() has been added
to the media elements.totalBytes and bufferedBytes
attributes have been removed from the media elements.input element gained a
placeholder attribute.Location object gained a
resolveURL() method.object elements now partake in form
submission.type attribute of the input
element gained the values color and
search .input element gained a multiple
attribute which allows for either multiple e-mails or multiple
files to be uploaded depending on the value of the
type attribute.form and input elements now have
a novalidate attribute to indicate that the form
fields should not be required to have valid values upon
submission.q element has changed again. Punctation is to
be provided by the user agent again.unload and beforeunload events
are now defined.headers attribute pointing to a
td element, but authors are required to use
th instead.http-equiv
values.meta element has a charset
attribute it must occur within the first 512 bytes.StorageEvent object now has a
storageArea attribute.foreignObject element.label element contains an
input it may still have a for attribute
as long as it points to the input element it
contains.input element now has an
indeterminate DOM attribute.HTMLDocument and
Window objects is now defined.Window object gained the
locationbar , menubar ,
personalbar , scrollbars ,
statusbar and toolbar attributes giving
information about the user interface.The changes since the publication on 22 January 2008 are as follows:
ping attribute have changed.<meta http-equiv=content-type> is now a
conforming way to set the character encoding.canvas element has been cleaned up.
Text support has been added.globalStorage is now restricted to the same-origin
policy and renamed to localStorage . Related event
dispatching has been clarified.postMessage() API changed. Only the origin of the
message is exposed, no longer the URI. It also requires a second
argument that indicates the origin of the target document.dataTransfer object now has a types
attribute indicating the type of data being transferred.m element is now called mark
.figure element no longer requires a
caption.ol element has a new reversed
attribute.queryCommandEnabled() and related
methods.headers attribute has been added for
td elements.table element has a new
createTBody() method.data-
name and can access these through the DOM using
dataset[ name ] on the element in
question.q element has changed to require punctation
inside rather than having the browser render it.target attribute can now have the value
_blank .showModalDialog API has been added.document.domain API has been defined.source element now has a new
pixelratio attribute useful for videos that have some
kind encoding error.bufferedBytes , totalBytes and
bufferingThrottled DOM attributes have been added to
the video element.begin event has been renamed to
loadstart for consistency with the Progress Events
specification.charset attribute has been added to
script .iframe element has gained the
sandbox and seamless attributes which
provide sandboxing functionality.ruby , rt and rp
elements have been added to support ruby annotation.showNotification() method has been added to show
notification messages to the user.beforeprint and
afterprint events has been added.The editor would like to thank Ben Millard, Cameron McCormack, Charles McCathieNevile, Dan Connolly, David Håsäther, Frank Ellermann, Henri Sivonen, James Graham, Jürgen Jeka, Maciej Stachowiak, Martijn Wargers, Martyn Haigh, Masataka Yakura, Michael Smith, Olivier Gendrin, Philip Taylor and Simon Pieters for their contributions to this document as well as to all the people who have contributed to HTML 5 over the years for improving the Web!