HTML 5 differences from HTML 4
Abstract
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]
Status of this Document
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 public-html-comments@w3.org, 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.
Table of Contents
1. Introduction
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:
- Defines a single language called HTML 5 which can be written in a “custom” 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
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):
- De facto semantic definitions for some formerly presentational elements.
- Details of accessibility and media-independence features, such as the
longdesc
,alt
,summary
, andheaders
attributes. - The
style
attribute. - The repetition model.
1.2. Backwards Compatible
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”.
1.3. Development Model
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.
2. Syntax
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>
2.1. Character Encoding
For the HTML syntax of HTML 5 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 acharset
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.
2.2. The DOCTYPE
The 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 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>
.
3. Language
This section is split up in several subsections to more clearly illustrate the various differences there are between HTML 4 and HTML 5.
3.1. Content Model Changes
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
.
3.2. New Elements
The following elements have been introduced for better structure:
section
represents a generic document or application section. It can be used together withh1
–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
andvideo
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 newlist
attribute forinput
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>
- The
datatemplate
,rule
, andnest
elements provide a templating mechanism for HTML. 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.
3.3. New Attributes
HTML 5 has introduced several new attributes to various elements that were already part of HTML 4:
- The
a
andarea
elements now have amedia
attribute for consistency with thelink
element. It is purely advisory. - The
a
andarea
elements have a new attribute calledping
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 thehreflang
andrel
attributes. - The
base
element can now have atarget
attribute as well mainly for consistency with thea
element and because it was already widely supported. Also, thetarget
attribute for thea
andarea
elements is no longer deprecated, as it is useful in Web applications, for example in conjunction withiframe
. - The
value
attribute for theli
element is no longer deprecated as it is not presentational. The same goes for thestart
attribute of theol
element. - The
meta
element has acharset
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 theinput
(except when thetype
attribute ishidden
),select
,textarea
andbutton
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 forinput
,output
,select
,textarea
,button
andfieldset
elements allows for controls to be associated with more than a single form. - The
input
,button
andform
elements have a newreplace
attribute which affects what will be done with the document after a form has been submitted. - The
form
andselect
elements (as well as thedatalist
element) have adata
attribute that allows for automatically prefilling of form controls, in case ofform
, or the form control, in case ofselect
anddatalist
, with data from the server. - The new
required
attribute applies toinput
(except when thetype
attribute ishidden
,image
or some button type such assubmit
) andtextarea
. It indicates that the user has to fill in a value in order to submit the form. - The
input
andtextarea
elements have a new attribute calledinputmode
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 thedisabled
attribute on it. This was not possible before. - The
input
element has several new attributes to specify constraints:autocomplete
,min
,max
,pattern
andstep
. As mentioned before it also has a newlist
attribute which can be used together with thedatalist
andselect
element. input
andbutton
also have a newtemplate
attribute which can be used for repetition templates.- The
menu
element has three new attributes:type
,label
andautosubmit
. 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 globalcontextmenu
attribute. - The
style
element has a newscoped
attribute which can be used to enable scoped style sheets. Style rules within such astyle
element only apply to the local tree. - The
script
element has a new attribute calledasync
that influences script loading and execution. - The
html
element has a new attribute calledmanifest
that points to an application cache manifest used in conjunction with the API for offline Web applications.
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:
- 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
draggable
attribute can be used together with the new drag & drop API. - The
irrelevant
attribute indicates that an element is not yet, or is no longer, relevant.
The following are the attributes for the repetition model. These are global attributes and as such may be used on all HTML elements, or on any element in any other namespace, with the attributes being in the http://www.w3.org/1999/xhtml
namespace.:
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.
3.4. Changed Elements
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 anhref
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
alt
attribute on theimg
element is optional under a limited set of circumstances. In general authors should include it.
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 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 useabbr
for abbreviations.applet
has been obsoleted in favor ofobject
.isindex
usage can be replaced by usage of form controls.dir
has been obsoleted in favor oful
.
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.
3.6. Absent Attributes
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 ona
,area
,button
,input
,label
,legend
andtextarea
.rev
andcharset
attributes onlink
anda
.shape
andcoords
attributes ona
.longdesc
attribute onimg
andiframe
.target
attribute onlink
.nohref
attribute onarea
.profile
attribute onhead
.version
attribute onhtml
.name
attribute onmap
,img
,object
,form
,iframe
,a
(useid
instead).scheme
attribute onmeta
.archive
,classid
,codebase
,codetype
,declare
andstandby
attributes onobject
.valuetype
andtype
attributes onparam
.charset
andlanguage
attributes onscript
.summary
attribute ontable
.headers
,axis
andabbr
attributes ontd
andth
.scope
attribute ontd
.
In addition, HTML 5 has none of the presentational attributes that were in HTML 4 as they are better handled by CSS:
align
attribute oncaption
,iframe
,img
,input
,object
,legend
,table
,hr
,div
,h1
,h2
,h3
,h4
,h5
,h6
,p
,col
,colgroup
,tbody
,td
,tfoot
,th
,thead
,tr
andbody
.alink
,link
,text
andvlink
attributes onbody
.background
attribute onbody
.bgcolor
attribute ontable
,tr
,td
,th
andbody
.border
attribute ontable
,img
andobject
.cellpadding
andcellspacing
attributes ontable
.char
andcharoff
attributes oncol
,colgroup
,tbody
,td
,tfoot
,th
,thead
andtr
.clear
attribute onbr
.compact
attribute ondl
,menu
,ol
andul
.frame
attribute ontable
.frameborder
attribute oniframe
.height
attribute oniframe
,td
andth
.hspace
andvspace
attributes onimg
andobject
.marginheight
andmarginwidth
attributes oniframe
.noshade
attribute onhr
.nowrap
attribute ontd
andth
.rules
attribute ontable
.scrolling
attribute oniframe
.size
attribute onhr
,input
andselect
.style
attribute on all elements with the exception offont
.type
attribute onli
,ol
andul
.valign
attribute oncol
,colgroup
,tbody
,td
,tfoot
,th
,thead
andtr
.width
attribute onhr
,table
,td
,th
,col
,colgroup
,iframe
andpre
.
4. APIs
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:
- 2D drawing API which can be used with the new
canvas
element. - API for playing of video and audio which can be used with the new
video
andaudio
elements. - Persistent storage. Both key / value and a SQL database are supported.
- An API that enables offline Web applications.
- An API that allows a Web application to register itself for certain protocols or MIME types.
- Editing API in combination with a new global
contenteditable
attribute. - Drag & drop API in combination with a
draggable
attribute. - Network API.
- API that exposes the history and allows pages to add to it to prevent breaking the back button. (This API has the necessary security restrictions in place.)
- Cross document messaging.
- Server sent events in combination with the
event-source
element.
4.1. Extensions to HTMLDocument
HTML 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 withclass
attributes and aDocument
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 onHTMLElement
in Web browsers and not part of any standard.activeElement
andhasFocus
to determine which element is currently focused and whether theDocument
has focus respectively.getSelection()
which returns an object that represents the current selection(s).designMode
andexecCommand()
which are mostly used for editing of documents.
4.2. Extensions to HTMLElement
The HTMLElement
interface has also gained several extensions in HTML 5:
getElementsByClassName()
which is basically a scoped version of the one found onHTMLDocument
.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 forclassName
. The object it returns exposes methods, such ashas()
,add()
,remove()
andtoggle()
for manipulating the element’s classes. Thea
,area
andlink
elements have a similar attribute calledrelList
that provides the same functionality for therel
attribute.
Acknowledgements
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!