HTML5

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 : permet de décrire plus précisément votre contenu.
  • Connectivité : permet de communiquer avec le serveur d'une façon nouvelle et innovante.
  • Hors-connexion & stockage : permet aux pages web de stocker des données en local, côté client, et de fonctionner plus efficacement hors-connexion.
  • Multimédia : rendre la vidéo et l'audio des citoyens de premier plan sur l'Open Web
  • Rendu 2D/3D et effets : permet des options de présentation bien plus variées.
  • Performance & intégration : offre une puissance bien plus grande et une meilleure utilisation du matériel de l'ordinateur.
  • Accès aux périphériques : permet un usage de périphériques d'entrée et de sortie variés.
  • Style : permet aux auteurs d'écrire des thèmes plus sophistiqué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 : <section>, <article>, <nav>, <header>, <footer>, <aside> et <hgroup>.
Utilisation de l'audio et de la video en HTML5
Les éléments <audio> et <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 type de <input> et le nouvel élément <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 <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, ou encore <meter>.
Amélioration de <iframe>
En utilisant les attributs sandbox, seamless, et srcdoc, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément <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 multiple de l'élément HTML <input> type="file".

Multimédia

Utilisation de l'audio et de la video en HTML5
Les éléments <audio> et <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 <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 <canvas> et apprennez à dessiner des graphiques et autres objets dans Firefox.
API de texte HTML5 pour les éléments <canvas>
Les éléments <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 <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 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 border-image, mais aussi de faire des bords arrondis grâce à la propriété 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 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 @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.