HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 294657
  • Created:
  • Creator: bdnd
  • Is current revision? No
  • Comment

Revision Content

HTML5 Demos

A collection of demos showing the latest HTML technologies in action.

HTML5_Logo_128.png

HTML5 is the latest evolution in the standard that defines HTML. While the HTML5 specification is not yet finalized and still subject to change, Mozilla and other browser vendors have begun implementing some parts of it. The articles linked here describe the parts of HTML5 that are already supported by Mozilla's Gecko engine, used by Firefox and many other products. Refer to specific articles for the versions of Gecko and other browser engines that support each feature.

(Here is another classification of HTML5 articles.)

Introduction to HTML5

Introduction to HTML5
This article introduces how to use HTML5 in your web design or web application.

HTML5 elements

List of HTML5 elements / tags
A page that has the complete table of HTML5 elements (tags) based on the current specification draft.
Using audio and video
Firefox 3.5 added support for the HTML5 {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.
Forms in HTML5
A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the {{ HTMLElement("input") }} attribute {{ htmlattrxref("type", "input") }} and the new {{ HTMLElement("output") }} element.
Sections and outlines in HTML5
A look at the new outlining and sectioning element in HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
The {{ HTMLElement("mark") }} element
The mark element is used to highlight text of special relevance.
The {{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements
These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.

Canvas support

Canvas Tutorial
 Learn about the new {{ HTMLElement("canvas") }} element and how to draw graphs and other objects in Firefox
HTML5 text API for <canvas> elements
The HTML5 text API is now supported by {{ HTMLElement("canvas") }} elements.

Web application features

Offline resources
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
Online and offline events
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
WHATWG client-side session and persistent storage (aka DOM Storage)
Client-side session and persistent storage allows web applications to store structured data on the client side.
The contentEditable attribute: transform your website to a wiki!
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
Using files from web applications
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{ HTMLElement("input") }} of type file HTML element's new multiple attribute.

DOM features

getElementsByClassName
The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.
Drag and drop
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.

HTML parser

Gecko's HTML5-compliant parser—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May 2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline("4.0") }}

Additional changes

  • localName and namespaceURI in HTML documents now behave like they do in XML documents: localName returns in lower case and namespaceURI for HTML elements is "http://www.w3.org/1999/xhtml"
  • When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new hashchange event is sent to the page. See window.onhashchange for more information.
  • Support for element.classList to allow easier handling of the class attribute.
  • document readiness event readystatechange  and document.readyState property are supported.
  • Colors in presentation attributes are interpreted according to HTML5.

Technologies often called part of HTML5 that aren't

These often get lumped in with a broad term use of "HTML5" but are not actually part of the W3C HTML5 Spec.

See Also

Changes in Firefox releases that affect Web developers:

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

 

Revision Source

<div class="callout-box">
  <div style="font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;">
    HTML5 Demos</div>
  <p>A <a href="/en-US/demos/tag/tech:html5" title="/en-US/demos/tag/tech:css3/">collection of demos</a> showing the latest HTML technologies in action.</p>
  <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" style=""></a></p>
</div>
<p>HTML5 is the latest evolution in the standard that defines HTML. While the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 specification</a> is not yet finalized and still subject to change, Mozilla and other browser vendors have begun implementing some parts of it. The articles linked here describe the parts of HTML5 that are already supported by Mozilla's <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> engine, used by <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> and <a href="/en-US/docs/List_of_Mozilla-Based_Applications" title="List of Mozilla-Based Applications">many other products</a>. Refer to specific articles for the versions of Gecko and other browser engines that support each feature.</p>
<p>(Here is <a href="/en-US/docs/HTML/HTML5/HTML5_Thematic_Classification" title="HTML/HTML5/HTML5 Thematic Classification">another classification of HTML5 articles</a>.)</p>
<h2 id="Introduction_to_HTML5">Introduction to HTML5</h2>
<dl>
  <dt>
    <a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/Introduction to HTML5"><strong>Introduction to HTML5</strong></a></dt>
  <dd>
    This article introduces how to use HTML5 in your web design or web application.</dd>
</dl>
<h2 id="HTML5_elements">HTML5 elements</h2>
<dl>
  <dt>
    <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="en"><strong>List of HTML5 elements / tags</strong></a></dt>
  <dd>
    A page that has the complete table of HTML5 elements (tags) based on the current specification draft.</dd>
</dl>
<dl>
  <dt>
    <a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using audio and video</a></dt>
  <dd>
    Firefox 3.5 added support for the HTML5 {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Forms_in_HTML" title="HTML/HTML5/Forms in HTML5">Forms in HTML5</a></dt>
  <dd>
    A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the {{ HTMLElement("input") }} attribute {{ htmlattrxref("type", "input") }} and the new {{ HTMLElement("output") }} element.</dd>
  <dt>
    <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt>
  <dd>
    A look at the new outlining and sectioning element in HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd>
  <dt>
    The {{ HTMLElement("mark") }} element</dt>
  <dd>
    The mark element is used to highlight text of special <em>relevance</em>.</dd>
  <dt>
    The {{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements</dt>
  <dd>
    These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.</dd>
</dl>
<h3 id="Canvas_support">Canvas support</h3>
<dl>
  <dt>
    <a href="/en-US/docs/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Canvas Tutorial </a></dt>
  <dd>
     Learn about the new <code>{{ HTMLElement("canvas") }}</code> element and how to draw graphs and other objects in Firefox</dd>
  <dt>
    <a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code>&lt;canvas&gt;</code> elements</a></dt>
  <dd>
    The HTML5 text API is now supported by {{ HTMLElement("canvas") }} elements.</dd>
</dl>
<h2 id="Web_application_features">Web application features</h2>
<dl>
  <dt>
    <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources</a></dt>
  <dd>
    Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
  <dt>
    <a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
  <dd>
    Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt>
  <dd>
    Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt>
  <dd>
    HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
  <dt>
    <a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
  <dd>
    Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: Courier New;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute.</dd>
</dl>
<h2 id="DOM_features">DOM features</h2>
<dl>
  <dt>
    <a href="/en-US/docs/DOM/document.getElementsByClassName" title="DOM/document.getElementsByClassName">getElementsByClassName</a></dt>
  <dd>
    The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.</dd>
  <dt>
    <a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
  <dd>
    The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
  <dt>
    <a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
  <dd>
    The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
  <dt>
    <a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
  <dd>
    You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
</dl>
<h2 id="HTML_parser">HTML parser</h2>
<p>Gecko's <a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a>—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May 2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline("4.0") }}</p>
<h2 id="Additional_changes">Additional changes</h2>
<ul>
  <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" target="_blank" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code></li>
  <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a href="/en-US/docs/Mozilla_event_reference/hashchange">window.onhashchange</a> for more information.</li>
  <li>Support for <code><a href="/en-US/docs/DOM/element.classList" title="DOM/element.classList">element.classList</a></code> to allow easier handling of the class attribute.</li>
  <li>document readiness event <a href="/en-US/docs/Mozilla_event_reference/readystatechange">readystatechange</a>  and <a href="/en-US/docs/DOM/document.readyState">document.readyState</a> property are supported.</li>
  <li>Colors in presentation attributes are interpreted according to HTML5.</li>
</ul>
<h2 id="Technologies_often_called_part_of_HTML5_that_aren't">Technologies often called part of HTML5 that aren't</h2>
<p>These often get lumped in with a broad term use of "HTML5" but are not actually part of the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="W3C HTML5 Spec">W3C HTML5 Spec</a>.</p>
<ul>
  <li><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li>
  <li><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a></li>
  <li><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code></li>
  <li><code><a href="/en-US/docs/DOM/Locating_DOM_elements_using_selectors" title="DOM/Locating DOM elements using selectors">querySelector()</a></code></li>
  <li><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocation</a></li>
  <li><a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li>
  <li><a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a></li>
  <li><a href="/en-US/docs/XBL2_specification_(external)" title="XBL2 specification (external)">XBL2</a></li>
  <li><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></li>
  <li><a href="/en-US/docs/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li>
  <li>Faster JavaScript</li>
</ul>
<h2 id="See_Also">See Also</h2>
<p>Changes in Firefox releases that affect Web developers:</p>
<ul>
  <li><a href="/en-US/docs/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li>
  <li><a href="/en-US/docs/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li>
  <li><a href="/en-US/docs/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li>
  <li><a href="/en-US/docs/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li>
  <li><a href="/en-US/docs/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li>
  <li><a href="/en-US/docs/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li>
  <li><a href="/en-US/docs/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li>
  <li><a href="/en-US/docs/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li>
  <li><a href="/en-US/docs/Firefox_4_for_developers" title="Firefox 4 for developers">Firefox 4</a></li>
  <li><a href="/en-US/docs/Firefox_3.6_for_developers" title="Firefox 3.6 for developers">Firefox 3.6</a></li>
  <li><a href="/en-US/docs/Firefox_3.5_for_developers" title="Firefox 3.5 for developers">Firefox 3.5</a></li>
  <li><a href="/en-US/docs/Firefox_3_for_developers" title="Firefox 3 for developers">Firefox 3</a></li>
  <li><a href="/en-US/docs/Firefox_2_for_developers" title="Firefox 2 for developers">Firefox 2</a></li>
  <li><a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox 1.5 for developers">Firefox 1.5</a></li>
</ul>
<div class="noinclude">
  <p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p>
</div>
<p> </p>
Revert to this revision