HTML5

HTML 5 is a new version of HTML 4.01 and XHTML 1.0 addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. Besides defining a markup language that can be written in both HTML (HTML5) and XML (XHTML5) it also defines many APIs that form the basis of the Web architecture. These APIs are known to some as "DOM Level 0" and have never been documented. Yet they are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.

HTML 5 is the main focus of the WHATWG community and also that of the (new) W3C HTML Working Group.

What is the WHATWG?

The WHATWG (Web HypertextApplication Technology Working Group) is a growing communityof people interested in evolving the Web. It focuses primarily on thedevelopment of HTML and APIs needed for Web applications.

The WHATWG was founded by individuals of Apple, the MozillaFoundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozillaand Opera were becoming increasingly concerned about the W3C's direction withXHTML, lack of interest in HTML and apparent disregard for the needs ofreal-world authors. So, in response, these organizations set out with a missionto address these concerns and the WebHypertext Application Technology Working Group was born.

History

The conceptual thinking for HTML 5 began in late 2003. TheWorld Wide Web Consortium (W3C), the organization that oversees the web'sstandard protocols and guidelines, expressed interest in the HTML 5 draftoriginally developed by the Web Hypertext Application Technology Working Group(WHATWG).

Development is underway, and HTML 5 is anticipated to reachW3C Candidate Recommendation status in 2012, though many modern browsersalready have partial support for HTML 5 specifications.

Differences from HTML 4/XHTML 1.x

The following is a cursory list of differences and somespecific examples.

  • New parsing rules oriented towards flexible parsing and compatibility
  • New elements – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
  • New types of form controls – dates and times, email, url, search
  • New attributes – ping (on a and area), charset (on meta), async (on script)
  • Global attributes (that can be applied for every element) – id, tabindex, hidden
  • Deprecated elements dropped – center, font, strike

Elements

List of some of theelements

Tag Description  4   5 
<!--...--> Defines a comment 4 5
<!DOCTYPE>  Defines the document type 4 5
<a> Defines a hyperlink 4 5
<abbr> Defines an abbreviation 4 5
<acronym> Not supported. Defines an acronym 4  
<address> Defines an address element 4 5
<applet> Not supported. Defines an applet 4  
<area> Defines an area inside an image map 4 5
<article> Defines an article   5
<aside> Defines content aside from the page content   5
<audio> Defines sound content   5
<b> Defines bold text 4 5
<base> Defines a base URL for all the links in a page 4 5
<basefont> Not supported. Use CSS instead 4  
<bdo> Defines the direction of text display 4 5
<big> Not supported. Defines big text 4  
<blockquote> Defines a long quotation 4 5
<body> Defines the body element 4 5
<br> Inserts a single line break 4 5
<button> Defines a push button 4 5
<canvas> Defines graphics   5
<caption> Defines a table caption 4 5
<center> Not supported. Defines centered text 4  
<cite> Defines a citation 4 5
<code> Defines computer code text 4 5
<col> Defines attributes for table columns  4 5
<colgroup> Defines groups of table columns 4 5
<command> Defines a command button   5
<datagrid> Defines data in a tree-list   5
<datalist> Defines a dropdown list   5
<datatemplate> Defines a data template   5
<dd> Defines a definition description 4 5
<del> Defines deleted text 4 5
<details> Defines details of an element   5
<dialog> Defines a dialog (conversation)   5
<dir> Not supported. Defines a directory list 4  
<div> Defines a section in a document 4 5
<dfn> Defines a definition term 4 5
<dl> Defines a definition list 4 5
<dt> Defines a definition term 4 5
<em> Defines emphasized text  4 5
<embed> Defines external interactive content or plugin   5
<eventsource> Defines a target for events sent by a server   5
<fieldset> Defines a fieldset 4 5
<figure> Defines a group of media content, and their caption   5
<font> Deprecated. Defines text font, size, and color 4  
<footer> Defines a footer for a section or page   5
<form> Defines a form  4 5
<frame> Not supported. Defines a sub window (a frame) 4  
<frameset> Not supported. Defines a set of frames 4  
<h1> to <h6> Defines header 1 to header 6 4 5
<head> Defines information about the document 4 5
<header> Defines a header for a section or page   5
<hr> Defines a horizontal rule 4 5
<html> Defines an html document 4 5
<i> Defines italic text 4 5
<iframe> Defines an inline sub window (frame) 4 5
<img> Defines an image 4 5
<input> Defines an input field 4 5
<ins> Defines inserted text 4 5
<isindex> Not supported. Defines a single-line input field 4  
<kbd> Defines keyboard text 4 5
<label> Defines a label for a form control 4 5
<legend> Defines a title in a fieldset 4 5
<li> Defines a list item 4 5
<link> Defines a resource reference 4 5
<mark> Defines marked text   5
<map> Defines an image map  4 5
<menu> Defines a menu list 4 5
<meta> Defines meta information 4 5
<meter> Defines measurement within a predefined range   5
<nav> Defines navigation links   5
<nest> Defines a nestingpoint in a datatemplate   5
<noframes> Not supported. Defines a noframe section 4  
<noscript> Defines a noscript section 4 5
<object> Defines an embedded object 4 5
<ol> Defines an ordered list 4 5
<optgroup> Defines an option group 4 5
<option> Defines an option in a drop-down list 4 5
<output> Defines some types of output   5
<p> Defines a paragraph 4 5
<param> Defines a parameter for an object 4 5
<pre> Defines preformatted text 4 5
<progress> Defines progress of a task of any kind   5
<q> Defines a short quotation 4 5
<rule> Defines the rules for updating a template   5
<s> Not supported. Defines strikethrough text 4  
<samp> Defines sample computer code 4 5
<script> Defines a script 4 5
<section> Defines a section   5
<select> Defines a selectable list 4 5
<small> Defines small text 4 5
<source> Defines media resources   5
<span> Defines a section in a document 4 5
<strike> Not supported. Defines strikethrough text 4  
<strong> Defines strong text 4 5
<style> Defines a style definition 4 5
<sub> Defines subscripted text 4 5
<sup> Defines superscripted text 4 5
<table> Defines a table 4 5
<tbody> Defines a table body 4 5
<td> Defines a table cell 4 5
<textarea> Defines a text area 4 5
<tfoot> Defines a table footer 4 5
<th> Defines a table header 4 5
<thead> Defines a table header 4 5
<time> Defines a date/time   5
<title> Defines the document title 4 5
<tr> Defines a table row 4 5
<tt> Not supported. Defines teletype text 4  
<u> Not supported. Defines underlined text 4  
<ul> Defines an unordered list 4 5
<var> Defines a variable 4 5
<video> Defines a video   5
<xmp> Not supported. Defines preformatted text 4  

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.
  • header represents the header of a section.
  • footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • nav represents a section of the document intended for navigation.
  • dialog can be used to mark up a conversation like this:

<dialog>
    <dt> Costello
    <dd> Look, you gotta first baseman?
    <dt> Abbott
    <dd> Certainly.
    <dt> Costello
    <dd> Who's playing first?
    <dt> Abbott
    <dd> That's right.
    <dt> Costello
    <dd> When you pay off the first baseman every month, who gets the money?
    <dt> Abbott
    <dd> Every dollar of it.
</dialog>

  • figure can be used to associate a caption together with some embedded content, such as a graphic or video:

<figure>
    <video src="ogg"></video>
    <legend>Example</legend>
</figure>

Then there are several other new elements:

  • audio and video for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
  • embed is used for plugin content.
  • mark represents a run of marked text.
  • meter represents a measurement, such as disk usage.
  • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
  • time represents a date and/or time.
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • 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>

  • keygen represents control for key pair generation.
  • bb represents a user agent command that the user can invoke.
  • output represents some type of output, such as from a calculation done through scripting.
  • ruby, rt and rp allow for marking up ruby annotations.

The input element's type attribute now has the following new values:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url
  • search
  • color

The idea of these new types is that the user agent can provide theuser interface, such as a calendar date picker or integration with the user'saddress book, and submit a defined format to the server. It gives the user abetter experience as his input is checked before sending it to the servermeaning there is less time to wait for feedback.

Changed Elements

These elements have slightlymodified meanings in HTML 5 to better reflect how they are used on the Webor to make them more useful:

  • The a element without an href attribute now represents a "placeholder link". It can also contain flow content rather than being restricted to phrase content.
  • The address element is now scoped by the new concept of sectioning.
  • The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.
  • The hr element now represents a paragraph-level thematic break.
  • The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Usage varies widely by language.
  • For the label element the browser should no longer move focus from the label to the control unless such behavior is standard for the underlying platform user interface.
  • The menu element is redefined to be useful for toolbars and context menus.
  • The small element now represents small print (for side comments and legal print).
  • The strong element now represents importance rather than strong emphasis.

Absent Elements

The elements in this section are not to be used by authors. Useragents will still have to support them and various sections in HTML 5define how. E.g. the obsolete isindexelement is handled by the parser section.

The following elements are not in HTML 5 because their effectis purely presentational and their function is better handled by CSS:

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

The following elements are not in HTML 5 because their usageaffected usability and accessibility for the end user in a negative way:

  • frame
  • frameset
  • noframes

The following elements are not included because they have not beenused often, created confusion, or their function can be handled by otherelements:

  • 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 is only conforming in the HTML syntax. It is not included inthe XML syntax as its usage relies on an HTML parser.

Attributes

List of attributes

Attribute Value Description 4 5
accesskey character Specifies a keyboard shortcut to access an element 4  
class classname Specifies a classname for an element (used to specify a class in a style sheet) 4 5
contenteditable true
false
Specifies whether or not a user is allowed to edit the content   5
contextmenu menu_id Specifies the context menu for an element   5
dir ltr
rtl
Specifies the text direction for the content in an element 4 5
draggable true
false
auto
Specifies whether or not a user is allowed to drag an element   5
id id Specifies a unique id for an element 4 5
irrelevant true
false
Specifies whether or not a element is irrelevant. An irrelevant element is not displayed   5
lang language_code Specifies a language code for the content in an element. Language code reference 4 5
ref URL / id Specifies a reference to another document / another part of a document (use only if the template attribute is set)   5
registrationmark reg_mark Specifies a registration mark for an element   5
style style_definition Specifies an inline style for an element 4 5
tabindex number Specifies the tab order of an element 4 5
template URL / id Specifies a reference to another document / another part of the document that should be applied to an element   5
title text Specifies extra information about an element 4 5

New Attributes

HTML 5 has introduced several new attributes to variouselements 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 URLs 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 URLs are going to be pinged as well as giving privacy-conscious users a way to turn it off.
  • The area element, for consistency with the a and link elements, now also has the hreflang 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.) Also, the target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe.
  • The value attribute for the li element is no longer deprecated as it is not presentational. The same goes for the start attribute of the ol element.
  • The meta element has a charset attribute now as this was already widely supported and provides a nice way to specify the character encoding for the document.
  • A new autofocus attribute can be specified on the input (except when the type attribute is hidden), select, textarea and button elements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience as the user can turn it off if he does not like it, for instance.
  • A new placeholder attribute can be specified on the input and textarea elements.
  • The new form attribute for input, output, select, textarea, button and fieldset elements allows for controls to be associated with a form. I.e. these elements can now be placed anywhere on a page, not just as descendants of the form element.
  • 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 fieldset element now allows the disabled attribute disabling all its contents when specified.
  • The input element has several new attributes to specify constraints: autocomplete, min, max, multiple, pattern and step. As mentioned before it also has a newlist attribute which can be used together with the datalist and select element.
  • 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) to indicate the size of the referenced icon.
  • The ol element has a new attribute called reversed to indicate that the list order is descending when present.
  • The iframe element has two new attributes called seamless and sandbox which allow for sandboxing content, e.g. blog comments.

Several attributes from HTML 4 now apply to all elements.These are called global attributes: class, dir, id, lang, style, tabindex and title.

There are also several new global attributes:

  • 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 attribute 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 spellcheck attribute allows for hinting whether content can be checked for spelling or not.

HTML 5 also makes all event handler attributes fromHTML 4 that take the form onevent-name global attributes and adds several new event handlerattributes for new events it defines, such as the onmessage attribute which canbe used together with the new eventsource element and the cross-document messaging API.

Absent Attributes

Some attributes from HTML 4 are no longer allowed inHTML 5. If they need to have any impact on user agents for compatibilityreasons it is defined how they should work in those scenarios.

  • accesskey attribute on a, area, button, input, label, legend and textarea.
  • rev and charset attributes on link and a.
  • shape and coords attributes on a.
  • longdesc attribute on img and iframe.
  • target attribute on link.
  • nohref attribute on area.
  • profile attribute on head.
  • version attribute on html.
  • name attribute on img and a (use id instead).
  • scheme attribute on meta.
  • archive, classid, codebase, codetype, declare and standby attributes on object.
  • valuetype and type attributes on param.
  • language attribute on script.
  • summary attribute on table.
  • axis and abbr attributes on td and th.
  • scope attribute on td.

In addition, HTML 5 has none of the presentational attributesthat were in HTML 4 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 table, img and object.
  • cellpadding and cellspacing attributes on table.
  • char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr.
  • clear attribute on br.
  • compact attribute on dl, menu, ol and ul.
  • frame attribute on table.
  • frameborder attribute on iframe.
  • height attribute on td and th.
  • hspace and vspace attributes on img and object.
  • marginheight and marginwidth attributes on iframe.
  • noshade attribute on hr.
  • nowrap attribute on td and th.
  • rules attribute on table.
  • scrolling attribute on iframe.
  • size attribute on hr.
  • 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.

API'S

HTML 5 introduces a number of APIs that help in creating Webapplications. These can be used together with the new elements introduced forapplications:

  • 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 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.
  • Cross-document messaging.

Video API

<video src=""samplevideo.flv" autoplay="true" controls poster="front.jpg" height="150" width="200"> alternate content </video>

Audio

<audio src="audio.oga" controls>alternate content</audio>

Note: Ogg Vorbis is acompletely open, patent-free, professional audio encoding and streamingtechnology with all the benefits of Open Source.

MathML and SVG

The HTML syntax of HTML 5 allows for MathML(Mathematical Markup Language) and SVG (ScalableVector Graphics) elements to be used inside a document. E.g. a very simpledocument using some of the minimal syntax features could look like:

For SVG:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG test</title>
  </head>
  <body>
    <p>A green Circle:
     <svg><circle r="50" cy="10" fill="green/>"</svg>
    </p>
  </body>
</html>

For mathml

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>MathML test</title>
  </head>
  <body>
    <math>
      <mrow>
        <mi>y</mi>
        <mo>=</mo>
        <msup>
          <mi>x</mi>
          <mn>2</mn>
        </msup>
      </mrow>
    </math>
  </body>
</html>

More complex combinations are also possible. E.g. with theSVG foreignObject element you could nest MathML,HTML, or both inside an SVG fragment that is itself inside HTML

Event

List of events and attributes

Attribute Value Description 4 5
accesskey character Specifies a keyboard shortcut to access an element 4  
class classname Specifies a classname for an element (used to specify a class in a style sheet) 4 5
contenteditable true
false
Specifies whether or not a user is allowed to edit the content   5
contextmenu menu_id Specifies the context menu for an element   5
dir ltr
rtl
Specifies the text direction for the content in an element 4 5
draggable true
false
auto
Specifies whether or not a user is allowed to drag an element   5
id id Specifies a unique id for an element 4 5
irrelevant true
false
Specifies whether or not a element is irrelevant. An irrelevant element is not displayed   5
lang language_code Specifies a language code for the content in an element. Language code reference 4 5
ref URL / id Specifies a reference to another document / another part of a document (use only if the template attribute is set)   5
registrationmark reg_mark Specifies a registration mark for an element   5
Style style_definition Specifies an inline style for an element 4 5
Tabindex number Specifies the tab order of an element 4 5
Template URL / id Specifies a reference to another document / another part of the document that should be applied to an element   5
Title text Specifies extra information about an element 4 5

Error handling

An HTML5 (text/html) browser will be flexible in handlingincorrect syntax, in contrast to the XHTML variant of HTML 5 (XHTML5), wheresuch errors must not be ignored. HTML5 is designed so that old HTML 4 browserscan safely ignore new HTML 5 constructs. In contrast to HTML 4, the HTML 5specification gives detailed rules for lexing and parsing, with the intent thatdifferent compliant browsers will produce the same result in the case ofincorrect syntax.

BackwardsCompatible

HTML 5 is defined in away that it is backwards compatible with the way user agents handle deployedcontent. To keep the authoring language relatively simple for authors severalelements and attributes are not included as outlined in the other sections ofthis document, such as presentational elements that are better dealt with usingCSS.

User agents, however,will always have to support these older elements and attributes and this is whythe specification clearly separates requirements for authors and user agents.This means that authors cannot use the isindexor the plaintext element, but user agents arerequired to support them in a way that is compatible with how these elementsneed to behave for compatibility with deployed content.

Since HTML 5 hasseparate conformance requirements for authors and user agents there is nolonger a need for marking features "deprecated".

Sample

Some sample site list

  1. http://html5demos.com/
  2. http://www.youtube.com/html5

References

Reference site list

Add new comment