1. Introduction
HTML has been in continuous evolution since it was introduced to the
Internet in the early 1990s. 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.
HTML4 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 HTML4, and
DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML.
HTML5 will replace these documents. [
HTML4] [
XHTML1]
The HTML5 draft reflects an effort, started in 2004, to study
contemporary HTML implementations and deployed content. The draft:
- Defines a single language called HTML5 which can be written in HTML
syntax and in XML syntax.
- Defines detailed processing models to foster interoperable
implementations.
- Improves markup for documents.
- Introduces markup and APIs for emerging idioms, such as Web
applications.
1.1. Open Issues
HTML5 is still a draft. The contents of HTML5, as well
as the contents of this document which depend on HTML5, are still being
discussed on the HTML Working Group and WHATWG mailing lists. The open
issues are linked from the HTML5 draft.
1.2. Backwards
Compatible
HTML5 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 attributes and this is why the HTML5 specification clearly separates
requirements for authors and user agents. For instance, this means that
authors cannot use the isindex or the 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 HTML5 has separate conformance requirements for authors and user
agents there is no longer a need for marking features "deprecated".
1.3. Development Model
The HTML5 specification will not be considered finished before there are
at least two complete implementations of the specification. A test suite
will be used to measure completeness of the implementations. This approach
differs from previous versions of HTML, where the final specification
would typically be approved by a committee before being actually
implemented. The goal of this change is to ensure that the specification
is implementable, and usable by authors once it is finished.
2. Syntax
HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1
documents published on the Web, but is not compatible with the more
esoteric SGML features of HTML4, such as processing
instructions and shorthand
markup as these are not supported by most user agents. Documents using
the HTML syntax are almost always served with the text/html
media type.
HTML5 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>
HTML5 also defines a text/html-sandboxed media type for
documents using the HTML syntax. This can be used when hosting untrusted
content.
The other syntax that can be used for HTML5 is XML. This syntax is
compatible with XHTML1 documents and implementations. Documents using this
syntax need to be served with an XML media 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 HTML5.
Note that XML documents must be served with an XML media 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>
2.1. Character Encoding
For the HTML syntax of HTML5, authors have three means of setting the
character encoding:
- At the transport level. By using the HTTP
Content-Type
header for instance.
- Using a Unicode Byte Order Mark (BOM) character at the start of the
file. This character provides a signature for the encoding used.
- Using a
meta element with a charset
attribute that specifies the encoding within the first 1024 bytes of the
document. E.g. <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">
although that syntax is still allowed.
For the XML syntax, authors have to use the rules as set forth in the
XML specifications to set the character encoding.
2.2. The DOCTYPE
The HTML syntax of HTML5 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
media type are always handled in standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is
case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of
HTML were longer because the HTML language was SGML-based and therefore
required a reference to a DTD. With HTML5 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>.
2.3. MathML and SVG
The HTML syntax of HTML5 allows for MathML and SVG elements to be used
inside a document. E.g. a very simple document using some of the minimal
syntax features could look like:
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
More complex combinations are also possible. E.g. with the SVG
foreignObject element you could nest MathML, HTML, or both
inside an SVG fragment that is itself inside HTML.
2.4. Miscellaneous
There are a few other syntax changes worthy of mentioning:
- HTML now has native support for IRIs, though they can only be fully
used if the document encoding is UTF-8 or UTF-16.
- The
lang attribute takes the empty string in addition to
a valid language identifier, just like xml:lang does in XML.
3. Language
This section is split up in several subsections to more clearly
illustrate the various differences there are between HTML4 and HTML5.
3.1. New Elements
The following elements have been introduced for better structure:
-
section
represents a generic document or application section. It can be used together with the
h1, h2, h3, h4,
h5, and h6 elements 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.
-
hgroup
represents the header of a section.
-
header
represents a group of introductory or navigational aids.
-
footer
represents a footer for a section and can contain information about the
author, copyright information, etc.
-
nav
represents a section of the document intended for navigation.
figure
represents a piece of self-contained flow content, typically referenced
as a single unit from the main flow of the document.
<figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</figure>
figcaption
can be used as caption (it is optional).
Then there are several other new elements:
The input element's type attribute now has the
following new values:
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.
3.2. New Attributes
HTML5 has introduced several new attributes to various elements that
were already part of HTML4:
-
The
a and area elements now have a
media attribute for consistency with the link
element.
-
The
area element, for consistency with the a
and link elements, now also has the hreflang,
type and rel attributes.
-
The
base element can now have a target
attribute as well, mainly for consistency with the a
element. (This is already widely supported.)
-
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 the user does not like
it, for instance.
-
A new
placeholder attribute can be specified on the
input and textarea elements. It represents a
hint intended to aid the user with data entry.
<input type=email placeholder="a@b.com">
-
The new
form attribute for input,
output, select, textarea,
button, label, object and
fieldset elements allows for controls to be associated with
a form. These elements can now be placed anywhere on a page, not just as
descendants of the form element, and still be associated
with a form.
<label>Email:
<input type=email form=foo name=email>
</label>
<form id=foo></form>
-
The new
required attribute applies to input
(except when the type attribute is hidden,
image or some button type such as submit),
select and textarea. It indicates that the
user has to fill in a value in order to submit the form. For
select, the first option element has to be a
placeholder with an empty value.
<label>Color: <select name=color required>
<option value="">Choose one
<option>Red
<option>Green
<option>Blue
</select></label>
-
The
fieldset element now allows the disabled
attribute which disables all descendant controls when specified, and the
name attribute which can be used for script access.
-
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 element. It also now has the width
and height attributes to specify the dimensions of the
image when using type=image.
-
The
input and textarea elements have a new
attribute named dirname that causes the directionality of
the control as set by the user to be submitted as well.
-
The
textarea element also has two new attributes,
maxlength and wrap which control max input
length and submitted line wrapping behavior, respectively.
-
The
form element has a novalidate attribute
that can be used to disable form validation submission (i.e. the form
can always be submitted).
-
The
input and button elements have
formaction, formenctype,
formmethod, formnovalidate, and
formtarget as new attributes. If present, they override the
action, enctype, method,
novalidate, and target attributes on the
form 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; can be used for e.g. favicons) to indicate the size of the
referenced icon. Thus allowing for icons of distinct dimensions.
-
The
ol element has a new attribute called
reversed. When present, it indicates that the list order is
descending.
-
The
iframe element has three new attributes called
sandbox, seamless, and srcdoc
which allow for sandboxing content, e.g. blog comments.
Several attributes from HTML4 now apply to all elements. These are
called global attributes: accesskey, class,
dir, id, lang, style,
tabindex and title. Additionally, XHTML 1.0 only
allowed xml:space on some elements, which is now allowed on
all elements in XHTML documents.
There are also several new global attributes:
- The
contenteditable attribute indicates that the element
is an editable area. The user can change the contents of the element and
manipulate the markup.
- The
contextmenu attribute can be used to point to a
context menu provided by the author.
- The
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.
- The
draggable and dropzone attributes can be
used together with the new drag & drop API.
- The
hidden attribute indicates that an element is not
yet, or is no longer, relevant.
- The
role and aria-* collection
attributes which can be used to instruct assistive technology.
- The
spellcheck attribute allows for hinting whether
content can be checked for spelling or not.
HTML5 also makes all event handler attributes from HTML4, which take the
form onevent-name, global attributes and adds
several new event handler attributes for new events it defines. E.g. the
play event which is used by the API for the media elements
(video and audio).
3.3. Changed Elements
These elements have slightly modified meanings in HTML5 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 for where a link otherwise might have been
placed. It can also contain flow content rather than being restricted to
phrasing content.
-
The
address element is now scoped by the new concept of
sectioning.
-
The
b element now represents a span of text to which
attention is being drawn for utilitarian purposes without conveying any
extra importance and with no implication of an alternate voice or mood,
such as key words in a document abstract, product names in a review,
actionable words in interactive text-driven software, or an article
lede.
-
The
cite element now solely represents the title of a
work (e.g. a book, a paper, an essay, a poem, a score, a song, a script,
a film, a TV show, a game, a sculpture, a painting, a theatre
production, a play, an opera, a musical, an exhibition, a legal case
report, etc). Specifically the example in HTML4 where it is used to mark
up the name of a person is no longer considered conforming.
-
The
dl element now represents an association list of
name-value groups, and is no longer said to be appropriate for dialogue.
-
The
head element no longer allows the object
element as child.
-
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 in a
manner indicating a different quality of text, such as a taxonomic
designation, a technical term, an idiomatic phrase from another
language, a thought, or a ship name in Western texts.
-
For the
label element the browser should no longer move
focus from the label to the control unless such behavior is standard for
the underlying platform user interface.
-
The
menu element is redefined to be useful for toolbars
and context menus.
-
The
s element now represents contents that are no longer
accurate or no longer relevant.
-
The
small element now represents side comments such as
small print.
-
The
strong element now represents importance rather than
strong emphasis.
-
The
u element now represents a span of text with an
unarticulated, though explicitly rendered, non-textual annotation, such
as labeling the text as being a proper name in Chinese text (a Chinese
proper name mark), or labeling the text as being misspelt.
3.4. Changed Attributes
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 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 type attribute on script and
style is no longer required if the scripting language is
ECMAScript and the styling language is CSS respectively.
The border attribute on table only allows the
values "1" and the empty string.
The following attributes are allowed but authors are discouraged from
using them and instead strongly encouraged to use an alternative solution:
-
The
border attribute on img. It is required
to have the value "0" when present. Authors can use CSS
instead.
-
The
language attribute on script. It is
required to have the value "JavaScript" (case-insensitive)
when present and cannot conflict with the type attribute.
Authors can simply omit it as it has no useful function.
-
The
name attribute on a. Authors can use the
id attribute instead.
-
The
summary attribute on table. The HTML5
draft defines several alternative solutions.
-
The
width and height attributes on
img and other elements are no longer allowed to contain
percentages.
3.5. Absent Elements
The elements in this section are not to be used by authors. User agents
will still have to support them and various sections in HTML5 define how.
E.g. the obsolete isindex element is handled by the parser
section.
The following elements are not in HTML5 because their effect is purely
presentational and their function is better handled by CSS:
basefont
big
center
font
strike
tt
The following elements are not in HTML5 because using them damages
usability and accessibility:
The following elements are not included because they have not been used
often, created confusion, or their function can be handled by other
elements:
acronym is not included because it has created a lot 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 element is only conforming in the HTML
syntax. It is not included in the XML syntax as its usage relies on an
HTML parser.
3.6. Absent Attributes
Some attributes from HTML4 are no longer allowed in HTML5. The
specification defines how user agents should process them in legacy
documents, but authors must not use them and they will not validate.
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 (use id
instead).
scheme attribute on meta.
archive, classid, codebase,
codetype, declare and standby
attributes on object.
valuetype and type attributes on
param.
axis and abbr attributes on td
and th.
scope attribute on td.
summary attribute on table.
In addition, HTML5 has none of the presentational attributes that were
in HTML4 as their functions 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 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.
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.
4. APIs
HTML5 introduces a number of APIs that help in creating Web
applications. These can be used together with the new elements introduced
for applications:
- An API for playing of video and audio which can be used with the new
video and audio elements.
- An API that enables offline Web applications.
- An API that allows a Web application to register itself for certain
protocols or media types.
- Editing API in combination with a new global
contenteditable attribute.
- Drag & drop API in combination with a
draggable
attribute.
- API that exposes the history and allows pages to add to it to prevent
breaking the back button.
4.1. Extensions to
HTMLDocument
HTML5 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 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.
4.2. Extensions to
HTMLElement
The HTMLElement interface has also gained several
extensions in HTML5:
-
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
(contains(), 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.
