Copyright © 2007 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 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 document is the first working draft of "HTML 5 Differences from HTML 4" produced by the HTML Working Group, part of the HTML Activity. The Working Group intends to publish this document as a Working Group Note. The working group is working on a new version of HTML not yet published under TR. In the meantime, you can access the HTML 5 Editors draft. The appropriate forum for comments is [email protected], a mailing list with a public archive.
Publication as a Working Group Note 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 XHTML1, which defines an XML serialization for HTML 4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. [HTML4] [XHTML1] [DOM2HTML]
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. This means that the contents of HTML 5, as well as the contents of this document as they 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, summary and headers
attributes.
style attribute.
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 behaved previously.
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 HTML 5 language has a "custom" HTML syntax that is compatible
with HTML 4 and XHTML1 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" syntax must be
served with the text/html MIME type.
HTML 5 also defines detailed parsing rules (including "error
handling") for this syntax which are largely compatible with popular
implementations. User agents will follow these rules for resources that
have the text/html MIME 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 within the first 512 bytes of the
file. <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 serves 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. DOCTYPEs 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 trigger standards mode for documents written using the HTML syntax.
Browsers already do this for <!DOCTYPE html>.
This section is split up in several subsections to more clearly illustrate the various differences there are between HTML 4 and HTML 5.
HTML 5 has defined stricter content models for elements such as
div and li. These elements now contain either
"block level" or "inline level" content, but not both. This change makes
HTML consistent in classifying elements according to whether they are used
for structuring the page ("block level") or assigning semantics to text
within the structure ("inline level"). This means that the following are
allowed:
<div> <em>…</em> … </div>
<div> <p><em>…</em></p> <p>…</p> </div>
… but this is not:
<div> <em>…</em> <p>…</p> </div>
… because the p element is block level element and
the em element is not.
Another change is that in HTML 5 the tfoot element
either appears at the end of a table element or directly
after thead.
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.
m 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>event-source is used to "catch" server sent events.
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.
The input element's type attribute now has the
following new values:
datetime
datetime-local
date
month
week
time
number
range
email
url
The 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
and because it was already widely supported. Also, the
target attribute for the a and
area elements is no longer deprecated, as it is useful in
web applications, for example 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 supported and provides a nicer 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 more than a single form.
The input, button and form
elements have a new replace attribute which affects what
will be done with the document after a form has been submitted.
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.
The input and textarea elements have a new
attribute called inputmode which gives a hint to the user
interface as to what kind of input is expected.
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, pattern and step. As
mentioned before it also has a new list attribute which can
be used together with the datalist and select
element.
input and button also have a new
template attribute which can be used for repetition
templates.
The menu element has three new attributes:
type, label and autosubmit. 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.
Several attributes from HTML 4 now apply to all elements. These are
called global attributes: class, dir,
id, lang, 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.
irrelevant attribute indicates that an element is not
yet, or is no longer, relevant.
There are also several global attributes that can appear on elements from other vocabularies when they are properly namespaced. These are used for repetition templates:
repeat
repeat-start
repeat-min
repeat-max
HTML 5 also makes all event handler attributes from HTML 4
that take the form onevent-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 event-source element and the cross-document
messaging API.
These elements have new meanings in HTML 5 which are incompatible with HTML 4. The new meanings better reflect the way they are used on the web or gives them a purpose so people can start using them.
The a element without an href attribute now
represents a "placeholder link".
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:
basefont
big
center
font, although it is allowed when inserted by a WYSIWYG
editor due to limitations in the state of the art in user interface for
these editors.
s
strike
tt
u
The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way:
frame
frameset
noframes
The 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 map, img,
object, form, iframe,
a (use id instead).
scheme attribute on meta.
archive, classid, codebase,
codetype, declare and standby
attributes on object.
valuetype and type attributes on
param.
charset and language attributes on
script.
summary attribute on table.
headers, 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, tr and body.
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 iframe, 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.
style attribute on all elements with the exception of
font.
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, iframe 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.
event-source
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 meaningfull 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 editor would like to thank Ben Millard, Cameron McCormack, Charles McCathieNevile, Dan Connolly, David Håsäther, Henri Sivonen, James Graham, Maciej Stachowiak, Martijn Wargers, Martyn Haigh, 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!