What’s New in HTML5?
The HTML 5 draft reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content. The draft:
<ol type="1"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Defines a single language called HTML 5 which can be written in a “custom” HTML syntax and in XML syntax. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Defines detailed processing models to foster interoperable implementations. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Improves markup for documents. </li><div class="separator" style="clear:both;text-align:center;"></div><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Introduces markup and APIs for emerging idioms, such as Web applications. </li></ol><div class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">
</div><h3 id="open-issues" style="margin:auto 0;">1.1. Open Issues</h3>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):
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">De facto semantic definitions for some formerly presentational elements. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Details of accessibility and media-independence features, such as the longdesc
, alt
, summary
, and headers
attributes. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The style
attribute. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The repetition model. </li></ul><h3 id="backwards-compatible" style="margin:auto 0;">1.2. Backwards Compatible</h3>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”.
<h3 id="development-model" style="margin:auto 0;">1.3. Development Model</h3>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.
<h2 id="syntax" style="margin:auto 0;">2. Syntax</h2>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:
<pre></pre><pre></pre><pre> </pre><pre> </pre><pre> Example document</pre><pre> </pre><pre> </pre><pre> <p>Example paragraph</p></pre><pre> </pre><pre></pre>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
.
<pre></pre><pre></pre><pre> </pre><pre> Example document</pre><pre> </pre><pre> </pre><pre> <p>Example paragraph</p></pre><pre> </pre><pre></pre><h3 id="character-encoding" style="margin:auto 0;">2.1. Character Encoding</h3>For the HTML syntax of HTML 5 authors have three means of setting the character encoding:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">At the transport level. By using the HTTP Content-Type
header for instance. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Using a meta
element with a charset
attribute that specifies the encoding as the first element child of the head
element. could be used to specify the UTF-8 encoding. This replaces the need for
</li></ul>For the XML syntax authors have to use the rules as set forth in the XML specifications to set the character encoding.
<h3 id="doctype" style="margin:auto 0;">2.2. The DOCTYPE
</h3>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
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 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 .
<h2 id="language" style="margin:auto 0;">3. Language</h2>This section is split up in several subsections to more clearly illustrate the various differences there are between HTML 4 and HTML 5.
<h3 id="new-elements" style="margin:auto 0;">3.1. New Elements</h3>The following elements have been introduced for better structure:
<div style="margin-left:.5in;text-indent:-.25in;">· section
represents a generic document or application section. It can be used together with h1
-h6
to indicate the document structure. </div><div style="margin-left:.5in;text-indent:-.25in;">· article
represents an independent piece of content of a document, such as a blog entry or newspaper article. </div><div style="margin-left:.5in;text-indent:-.25in;">· aside
represents a piece of content that is only slightly related to the rest of the page. </div><div style="margin-left:.5in;text-indent:-.25in;">· header
represents the header of a section. </div><div style="margin-left:.5in;text-indent:-.25in;">· footer
represents a footer for a section and can contain information about the author, copyright information, et cetera. </div><div style="margin-left:.5in;text-indent:-.25in;">· nav
represents a section of the document intended for navigation. </div><div style="margin-left:.5in;text-indent:-.25in;">· dialog
can be used to mark up a conversation like this:</div><pre style="margin-left:60pt;text-indent:-.25in;">·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">
·
<dt> Costello
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> Look, you gotta first baseman?
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dt> Abbott
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> Certainly.
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dt> Costello
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> Who's playing first?
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dt> Abbott
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> That's right.
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dt> Costello
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> When you pay off the first baseman every month, who gets the money?
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dt> Abbott
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
<dd> Every dollar of it.
</pre><pre style="margin-left:60pt;"></pre><div style="margin-left:.5in;text-indent:-.25in;">·
figure
can be used to associate a caption together with some embedded content, such as a graphic or video:</div><pre style="margin-left:60pt;text-indent:-.25in;">·
·
…
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
Example
</pre><pre style="margin-left:60pt;"></figure>
</pre>Then there are several other new elements:
<div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· embed
is used for plugin content. </div><div style="margin-left:.5in;text-indent:-.25in;">· m
represents a run of marked text. </div><div style="margin-left:.5in;text-indent:-.25in;">· meter
represents a measurement, such as disk usage. </div><div style="margin-left:.5in;text-indent:-.25in;">· time
represents a date and/or time. </div><div style="margin-left:.5in;text-indent:-.25in;">· canvas
is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera. </div><div style="margin-left:.5in;text-indent:-.25in;">· command
represents a command the user can invoke. </div><div style="margin-left:.5in;text-indent:-.25in;">· datagrid
represents an interactive representation of a tree list or tabular data. </div><div style="margin-left:.5in;text-indent:-.25in;">· details
represents additional information or controls which the user can obtain on demand. </div><div style="margin-left:.5in;text-indent:-.25in;">· datalist
together with the a new list
attribute for input
is used to make comboboxes:</div><pre style="margin-left:60pt;text-indent:-.25in;">·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">
·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">
·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
</pre><pre style="margin-left:60pt;text-indent:-.25in;">·
</pre><pre style="margin-left:60pt;"></pre><div style="margin-left:.5in;text-indent:-.25in;">· The
datatemplate
, rule
, and nest
elements provide a templating mechanism for HTML. </div><div style="margin-left:.5in;text-indent:-.25in;">· event-source
is used to "catch" server sent events. </div><div style="margin-left:.5in;text-indent:-.25in;">· output
represents some type of output, such as from a calculation done through scripting. </div><div style="margin-left:.5in;text-indent:-.25in;">· progress
represents a completion of a task, such as downloading or when performing a series of expensive operations. </div>The input
element's type
attribute now has the following new values:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">datetime
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">datetime-local
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">date
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">month
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">week
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">time
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">number
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">range
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">email
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">url
</li></ul>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.
<h3 id="new-attributes" style="margin:auto 0;">3.2. New Attributes</h3>HTML 5 has introduced several new attributes to various elements that were already part of HTML 4:
<div style="margin-left:.5in;text-indent:-.25in;">· The a
and area
elements now have a media
attribute for consistency with the link
element. It is purely advisory. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· The area
element, for consistency, now has the hreflang
and rel
attributes. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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
. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· You can now disable an entire fieldset
by using the disabled
attribute on it. This was not possible before. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· input
and button
also have a new template
attribute which can be used for repetition templates. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· The script
element has a new attribute called async
that influences script loading and execution. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div>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:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The contenteditable
attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The contextmenu
attribute can be used to point to a context menu provided by the author. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The draggable
attribute can be used together with the new drag & drop API. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">The irrelevant
attribute indicates that an element is not yet, or is no longer, relevant. </li></ul>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.:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">repeat
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">repeat-start
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">repeat-min
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">repeat-max
</li></ul>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 event-source
element and the cross-document messaging API.
<h3 id="changed-elements" style="margin:auto 0;">3.3. Changed Elements</h3>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:
<div style="margin-left:.5in;text-indent:-.25in;">· The a
element without an href
attribute now represents a "placeholder link". </div><div style="margin-left:.5in;text-indent:-.25in;">· The address
element is now scoped by the new concept of sectioning. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· The hr
element now represents a paragraph-level thematic break. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· The menu
element is redefined to be useful for actual menus. </div><div style="margin-left:.5in;text-indent:-.25in;">· The small
element now represents small print (for side comments and legal print). </div><div style="margin-left:.5in;text-indent:-.25in;">· The strong
element now represents importance rather than strong emphasis. </div><h3 id="absent-elements" style="margin:auto 0;">3.4. Absent Elements</h3>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:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">basefont
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">big
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">center
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">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. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">s
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">strike
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">tt
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">u
</li></ul>The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">frame
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">frameset
</li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">noframes
</li></ul>The following elements are not included because they have not been used often, created confusion or can be handled by other elements:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">acronym
is not included because it has created lots of confusion. Authors are to use abbr
for abbreviations. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">applet
has been obsoleted in favor of object
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">isindex
usage can be replaced by usage of form controls. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">dir
has been obsoleted in favor of ul
. </li></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.
<h3 id="absent-attributes" style="margin:auto 0;">3.5. Absent Attributes</h3>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.
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">accesskey
attribute on a
, area
, button
, input
, label
, legend
and textarea
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">rev
and charset
attributes on link
and a
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">shape
and coords
attributes on a
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">longdesc
attribute on img
and iframe
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">target
attribute on link
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">nohref
attribute on area
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">profile
attribute on head
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">version
attribute on html
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">name
attribute on map
, img
, object
, form
, iframe
, a
(use id
instead). </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">scheme
attribute on meta
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">archive
, classid
, codebase
, codetype
, declare
and standby
attributes on object
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">valuetype
and type
attributes on param
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">charset
and language
attributes on script
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">summary
attribute on table
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">headers
, axis
and abbr
attributes on td
and th
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">scope
attribute on td
. </li></ul>In addition, HTML 5 has none of the presentational attributes that were in HTML 4 as they are better handled by CSS:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">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
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">alink
, link
, text
and vlink
attributes on body
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">background
attribute on body
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">bgcolor
attribute on table
, tr
, td
, th
and body
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">border
attribute on table
, img
and object
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">cellpadding
and cellspacing
attributes on table
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">char
and charoff
attributes on col
, colgroup
, tbody
, td
, tfoot
, th
, thead
and tr
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">clear
attribute on br
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">compact
attribute on dl
, menu
, ol
and ul
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">frame
attribute on table
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">frameborder
attribute on iframe
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">height
attribute on iframe
, td
and th
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">hspace
and vspace
attributes on img
and object
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">marginheight
and marginwidth
attributes on iframe
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">noshade
attribute on hr
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">nowrap
attribute on td
and th
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">rules
attribute on table
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">scrolling
attribute on iframe
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">size
attribute on hr
, input
and select
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">style
attribute on all elements with the exception of font
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">type
attribute on li
, ol
and ul
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">valign
attribute on col
, colgroup
, tbody
, td
, tfoot
, th
, thead
and tr
. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">width
attribute on hr
, table
, td
, th
, col
, colgroup
, iframe
and pre
. </li></ul><h2 id="apis" style="margin:auto 0;">4. APIs</h2>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:
<ul type="disc"><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">2D drawing API which can be used with the new canvas
element. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">API for playing of video and audio which can be used with the new video
and audio
elements. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Persistent storage. Both key / value and a SQL database are supported. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">An API that enables offline Web applications. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">An API that allows a Web application to register itself for certain protocols or MIME types. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Editing API in combination with a new global contenteditable
attribute. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Drag & drop API in combination with a draggable
attribute. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Network API. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">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.) </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Cross-document messaging. </li><li class="MsoNormal" style="color:black;line-height:normal;margin:0 0 10pt;">Server-sent events in combination with the new event-source
element. </li></ul><h3 id="htmldocument-extensions" style="margin:auto 0;">4.1. Extensions to HTMLDocument
</h3>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:
<div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div style="margin-left:.5in;text-indent:-.25in;">· activeElement
and hasFocus
to determine which element is currently focused and whether the Document
has focus respectively. </div><div style="margin-left:.5in;text-indent:-.25in;">· getSelection()
which returns an object that represents the current selection(s). </div><div style="margin-left:.5in;text-indent:-.25in;">· designMode
and execCommand()
which are mostly used for editing of documents. </div><h3 id="htmlelement-extensions" style="margin:auto 0;">4.2. Extensions to HTMLElement
</h3>The HTMLElement
interface has also gained several extensions in HTML 5:
<div style="margin-left:.5in;text-indent:-.25in;">· getElementsByClassName()
which is basically a scoped version of the one found on HTMLDocument
. </div><div style="margin-left:.5in;text-indent:-.25in;">· innerHTML
as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document). </div><div style="margin-left:.5in;text-indent:-.25in;">· 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. </div><div class="MsoNormal" style="margin:0 0 10pt;">
</div><div class="MsoNormal" style="margin:0 0 10pt;">[ Source : http://www.w3.org/TR/2008/WD-html5-diff-20080122/#doctype ]</div>