HTML5 Demos

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


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 <audio> and <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 <input> attribute type and the new <output> element.
Sections and outlines in HTML5
A look at the new outlining and sectioning element in HTML5: <section> , <article> , <nav> , <header> , <footer> , <aside> and <hgroup> .
The <mark> element
The mark element is used to highlight text of special relevance.
The <figure> and <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 <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 <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 <input> of type file HTML element's new multiple attribute.

DOM features

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.) New in Firefox 4

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 ""
  • 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 document.onreadystatechange  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.

Tags (3)

Edit tags

Attachments (0)


Attach file