HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :

Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé HTML5 & Cie et est souvent juste abrégé en HTML5.

Conçue pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait le lien vers de nombreuses ressources sur les technologies HTML5 classées dans différents groupes suivant leur(s) fonction(s).

Sémantique

Introduction à HTML5: Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.
Sections et structure des documents avec HTML5: Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} et {{HTMLElement("hgroup")}}.
Utilisation de l'audio et de la video en HTML5: Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans vos pages de nouveaux contenus multimédias.
Formulaires en HTML5: Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut {{htmlattrxref("type", "input")}} de {{HTMLElement("input")}} et le nouvel élément {{HTMLElement("output")}}.

Nouveaux éléments d'HTML5: En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou encore {{HTMLElement("meter")}}.
Amélioration de {{HTMLElement("iframe")}}: En utilisant les attributs {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, et {{htmlattrxref("srcdoc", "iframe")}}, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément {{HTMLElement("iframe")}}.
MathML: Permet d'insérer des formules mathématiques directement dans les pages web.
Parseur conforme à HTML5: Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.

Connectivité

Web Sockets: Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.
Évènements envoyés par le serveur: Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel selon lequel le serveur ne peut envoyer des données qu'en réponse à une demande effectuée par le client.
WebRTC: RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.

Hors-connexion et Stockage

Ressources hors connexion : l'Application Cache: Firefox gère complètement la spécification des ressources hors connexion de HTML5.
Évènement online et offline: Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.
Stockage de session et persistance côté client du WHATWG (ou DOM Storage): Le stockage de session et la persistance côté client permettent aux applications web de stocker des données structurées du côté du client.
IndexedDB: Est un standard web pour stocker dans le navigateur des volumes importants de données structurées, et permettant d'effectuer des recherches rapides dans ces données en utilisant des index.
Utilisation de fichiers depuis des applications web: La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut {{htmlattrxref("multiple", "input")}} de l'élément HTML {{HTMLElement("input")}} {{htmlattrxref("type", "input")}}="file".

Multimédia

Utilisation de l'audio et de la video en HTML5: Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans les pages web de nouveaux contenus multimédia.
WebRTC: RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.
Utiliser l'API Camera: Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
Track et WebVTT: L'élément {{HTMLElement("track")}} permet de sous-titrer et de chapitrer. WebVTT est un format pour marquer du texte par rapport à une durée.

3D, Graphiques et Effets

Tutoriel Canvas: Découvrez le nouvel élément {{HTMLElement("canvas")}} et apprennez à dessiner des graphiques et autres objets dans Firefox.
API de texte HTML5 pour les éléments <canvas>: Les éléments {{HTMLElement("canvas")}} gèrent également l'API texte d'HTML5.
WebGL: WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments {{HTMLElement("canvas")}}.
SVG: Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.

Performance et Intégration

Web Workers: Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’intéraction.
XMLHttpRequest Niveau 2: Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'AJAX.
Moteurs JavaScript à compilation JIT (juste à temps): La nouvelle génération de moteurs JavaScript est bien plus puissante et permet de meilleures performances dans l'interprétation du langage.
API Historique: Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.
L'attribut contentEditable : transformer un site web en un wiki !: HTML5 a standardisé l'attribut contentEditable : apprenez-en plus sur cette fonctionnalité.
Glisser et déposer: L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein d'une page web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.
Gestion du focus en HTML: Les nouveaux attributs HTML5 activeElement et hasFocus sont gérés.
Gestionnaires de protocoles web: Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
requestAnimationFrame: Permet de contrôler le rendu des animations et ainsi d'obtenir une performance optimale.
API Plein écran: Contrôle l'utilisation de la totalité de l'écran pour afficher une page ou une application web sans l'interface du navigateur
API Verrouillage de la souris: Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
Évènement online et offline: Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.

Accès aux périphériques

Utiliser l'API Camera: Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
Évènements tactiles: Des gestionnaires pour réagir aux évènements créés par un utilisateur qui touche un écran tactile.
Utilisation de la Geolocalisation: Permet au navigateur de situer l'utilisateur en utilisant la géolocalisation.
Détection de l'orientation de l'appareil: Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page suivant l'orientation de l'appareil (portrait ou paysage).
API Verrouillage de la souris: Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.

Style

CSS a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le CSS3, bien que CSS ne soit plus une spécification monolithique et que les différent modules ne soient pas tous au niveau 3 : certains sont au niveau 1, d'autres au niveau 4, mais tous les niveaux intermédiaires sont couverts.

Nouveaux styles d'arrière-plan: Il est maintenant possible créer une ombre pour une boîte en utilisant {{cssxref("box-shadow")}}, et de définir plusieurs arrière-plans.
Des bordures plus classes: Il est maintenant non seulement possible d'utiliser des images pour styler les bordures en utilisant {{cssxref("border-image")}}, mais aussi de faire des bords arrondis grâce à la propriété {{cssxref("border-radius")}}.
Animer vos styles: En utilisant les Transitions CSS pour animer différents états, ou en utilisant les Animations CSS pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.
Amélioration de la typographie: Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler {{cssxref("text-overflow")}} et la césure automatique. Ils peuvent rajouter une ombre et des décorations plus fines. Des polices personnalisées peuvent être utilisées grâce {{cssxref("@font-face")}}.
Nouvelles options de mise en page: Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : Colonnes CSS et boîtes flexibles CSS.