HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 298789
  • Created:
  • Creator: teoli
  • 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.

The term represents two different concepts:

  • A new version of the language HTML, with new elements, attributes, and behaviors.
  • A larger set of technologies that allows more diverse and powerful Web sites and applications: this set is called HTML5 & friends and often shortened to just HTML5.

(Here is another classification of HTML5 articles.)

The larger set of HTML5 technologies is divided in several groups, based on the function.

Semantics

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") }}.
Using HTML5 audio and video
The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements embed and allow the manipution of new multimedia content.
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.
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.
List of HTML5 elements / tags
A page that has the complete table of HTML5 elements (tags) based on the current specification draft.
Introduction to HTML5
This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.
HTML5-compliant parser
The parser, which turns the bytes of an HTML document into a DOM,  has been extended and defines precisely the behavior to have in all case, even facing invalid HTML, leading a to far more predictability and interoperability between HTML5-compliant browsers.

Connectivity

Web Sockets
Allows to create a permanent connection between the page and the server and to exchange non-HTML data through that mean.
Server-sent event
Allows a server to push events to client, rather than the classical paradigm where the server could send data only in response to a client 's request.

Offline & storage

Offline resources: the application cache
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.
IndexedDB
A local database.
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.

Multimedia

Using HTML5 audio and video
The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements embed and allow the manipution of new multimedia content.
WebRTC
This technology, where RTC stands for Real-Time Communication, allow to build and control videoconferincing directly in the browser, without the need for a plugin or an external application.
Using the Camera API
Allows to use, manipulate and store an image from the computer's camera.

Performance & integration

Web Workers
Allows to delegate JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
XMLHttpRequest Level 2
Allows to fetch asynchronously some parts of the page, allowing it to be display dynamic content, varying according the time and user actions. This is the technology behind Ajax.
JIT-compiling JavaScript engines
The new generation of JavaScript engines are much more powerful , leading to greater performance.
History API
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
The contentEditable attribute: transform your website to a wiki!
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
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.

3D, graphics & effects

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.
WebGL
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{ HTMLElement("canvas") }} elements.

Not (yet) classified

 

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="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.</p>
<p>The term represents two different concepts:</p>
<ul>
  <li>A new version of the <em>language</em> HTML, with new elements, attributes, and behaviors.</li>
  <li>A larger set of technologies that allows more diverse and powerful Web sites and applications: this set is called <em>HTML5 &amp; friends</em> and often shortened to just <em>HTML5</em>.</li>
</ul>
<p>(Here is <a href="/en-US/docs/HTML/HTML5/HTML5_Thematic_Classification" title="HTML5 Thematic Classification">another classification of HTML5 articles</a>.)</p>
<p>The larger set of <em>HTML5 technologies</em> is divided in several groups, based on the function.</p>
<div style="display:none">
  <p><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3831/HTML5_Performance_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="width: 64px; height: 64px;" /><img alt="" src="/files/3829/HTML5_Styling_512.png" style="width: 64px; height: 64px;" /></p>
</div>
<h2 id="Semantics" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Semantics</h2>
<dl>
  <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>
    <a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
  <dd>
    The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements embed and allow the manipution of new multimedia content.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Forms_in_HTML" title="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>
    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>
  <dt>
    <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="List of HTML5 elements"><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>
  <dt>
    <a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt>
  <dd>
    This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd>
  <dt>
    <a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt>
  <dd>
    The parser, which turns the bytes of an HTML document into a DOM,&nbsp; has been extended and defines precisely the behavior to have in all case, even facing invalid HTML, leading a to far more predictability and interoperability between HTML5-compliant browsers.</dd>
</dl>
<h2 id="Connectivity" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Connectivity</h2>
<dl>
  <dt>
    <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
  <dd>
    Allows to create a permanent connection between the page and the server and to exchange non-HTML data through that mean.</dd>
  <dt>
    <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Server-sent event</a></dt>
  <dd>
    Allows a server to push events to client, rather than the classical paradigm where the server could send data only in response to a client 's request.</dd>
</dl>
<h2 id="Offline_.26_storage" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Offline &amp; storage</h2>
<dl>
  <dt>
    <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</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/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
  <dd>
    A local database.</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="Multimedia" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Multimedia</h2>
<dl>
  <dt>
    <a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
  <dd>
    The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements embed and allow the manipution of new multimedia content.</dd>
  <dt>
    <a href="/en-US/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt>
  <dd>
    This technology, where RTC stands for Real-Time Communication, allow to build and control videoconferincing directly in the browser, without the need for a plugin or an external application.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Using the Camera API</a></dt>
  <dd>
    Allows to use, manipulate and store an image from the computer's camera.</dd>
</dl>
<h2 id="Performance_.26_integration" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />Performance &amp; integration</h2>
<dl>
  <dt>
    <a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
  <dd>
    Allows to delegate JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
  <dt>
    <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
  <dd>
    Allows to fetch asynchronously some parts of the page, allowing it to be display dynamic content, varying according the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a>.</dd>
  <dt>
    JIT-compiling JavaScript engines</dt>
  <dd>
    The new generation of JavaScript engines are much more powerful , leading to greater performance.</dd>
  <dt>
    <a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt>
  <dd>
    Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</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/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="3D.2C_graphics_.26_effects" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />3D, graphics &amp; effects</h2>
<dl>
  <dt>
    <a href="/en-US/docs/Canvas_tutorial" title="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>
  <dt>
    <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
  <dd>
    WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{ HTMLElement("canvas") }} elements.</dd>
</dl>
<h2 id="Not_(yet)_classified">Not (yet) classified</h2>
<ul>
  <li><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a></li>
  <li><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocation</a></li>
</ul>
<div style="position: absolute; top: 619.4px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">
  &nbsp;</div>
Revert to this revision