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 souvent juste abrégé en HTML5.

Conçu pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait des liens vers de nombreuses ressources sur les technologies HTML5, classés dans différents groupes d'après leur fonction.

Sémantique : vous permet de décrire précisément votre contenu.
Connectivité : vous 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 sur le 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és
Performance & intégration : offre une puissance bien plus grande et une meilleur utilisation du matériel de l'ordinateur
Accès aux périphériques : permet un usage varié des périphériques d'entrées et de sorties
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 permet d'insérer dans vos pages et de manipuler de nouveaux contenus multimédia.
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 directement dans les pages, des formules mathématiques.
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 qui veut que le serveur envoie des données qu'en réponse à une demande du 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 d'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 permet aux applications web de stocker des données structurées du côté du client.
IndexedDB: est un standard web pour stocker des volumes importants de données structurées dans le navigateur, et pour effectuer des recherches rapides dans ces données en utilisant des indexes.
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 permet d'insérer dans vos pages et de manipuler 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 d'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 marqué du texte par rapport à une durée.

3D, Graphiques et Effets

Tutoriel Canvas: Découvrez le nouvel élément <canvas> et comment dessiner des graphiques et d'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’interaction.
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.
Moteur JavaScript à compilation JIT (juste à temps): La nouvelle génération de moteur JavaScript sont bien plus puissant, et apportent une plus grande performance.
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 et entre des sites 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 obtenir une performance optimale.
API Plein écran: Contrôle l'utilisation de la totalité de l'écran pour afficher une page web ou une application, 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éagire 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 geolocalisation.
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 d'après 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 n'est plus une spécification monolithique, et les différent modules ne sont pas tous au niveau 3 : certains sont au niveau 1 et d'autres au niveau 4, avec tous les niveaux intermédiaires de 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 bordure en utilisant border-image, mais aussi de faire des bords arrondies grâce à la propriété border-radius.
Animer vos styles: En utilisant les Transitions CSS pour animer entre 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.