- HTML5
-
HTML5 
Extension HTML5: .html, .htm
XHTML5: .xhtml, .xht, .xmlType MIME HTML5: text/html
XHTML5: application/xhtml+xml, application/xmlDéveloppé par W3C Type de format Hypertexte Extension du HTML 4 et XHTML 1.1 Standard(s) W3C HTML5 Spécification Format ouvert modifier 
HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est actuellement en développement. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été initié par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 2014[1], et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
Sommaire
Changements par rapport à HTML 4.X/XHTML 1.X
Spécifications
Les spécifications sont publiées par le W3C http://www.w3.org/TR/html5/
Doctype
Tout comme HTML ou XHTML, les documents HTML5 nécessitent un Doctype indiquant la méthode de rendu standard au navigateur. Toutefois, pour les documents XML cette déclaration est facultative, le navigateur l'interprétant en mode standard par défaut. Pour utiliser la structure XML (XHTML 5) il faut préciser dans le header : « Content-Type: application/xhtml+xml »..
Exemple d'utilisation avec HTML5
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>titre du site</title> <!-- meta --> <meta name="description" content=""> <meta name="author" content=""> <!-- mon icon --> <link rel="shortcut icon" href="favicon.ico"> <!-- mon template.css --> <link rel="stylesheet" href="main.css" type="text/css" media="screen"> </head> <body> <header class="ma-class-en-css"> <!-- menu du haut --> <nav class="ma-class-en-css"> <ul> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> </ul> </nav> </header> <!-- contenu de ma page --> <div> <!-- article n°1 --> <article class="ma-class-en-css"> <h1>titre de mon article</h1> <p>texte de mon article</p> <section class="ma-class-en-css"> <h2>sous-titre mon article</h2> <p>texte de mon sous-titre</p> <figure class="ma-class-en-css"> <a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a> </figure> </section> </article> <!-- article n°2 --> <article class="ma-class-en-css"> <h1>titre de mon article</h1> <p>texte de mon article</p> <section class="ma-class-en-css"> <h2>sous-titre mon article</h2> <p>texte de mon sous-titre</p> <figure class="ma-class-en-css"> <a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a> </figure> </section> </article> </div> <footer class="ma-class-en-css"> <!-- menu du bas --> <nav class="ma-class-en-css"> <ul> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> </ul> </nav> </footer> </body> </html>
Voir aussi : html5-profile
Il est à noter que la déclaration du Doctype n'est pas sensible à la casse et qu'il n'y a plus de référence à une DTD.
Encodage
Le processus de détection de l'encodage a également été modifié et s'effectue dans l'ordre :
- Vérification de la présence d'un header HTTP "Content-Type" ;
- Détection du BOM en début de fichier ;
- Utilisation d'une balise
metaspécifique (<meta charset="UTF-8">par exemple, la syntaxe utilisée dans les versions précédentes étant toujours compatible)
XHTML 5
Pour les documents XHTML5, l'auteur doit spécifier l'encodage dans le prologue XML, mais aussi le type de contenu : «
application/xhtml+xml». La globalité de la page doit être conforme à la syntaxe XML et ne doit pas ajouter de balises personnelles (exemple :<mabalise></mabalise>), sans quoi la page sera en erreur et le navigateur ne sera pas capable de l'afficher. C’est le mode le plus strict qui impose d'avoir une syntaxe quasi parfaite.<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Exemple</title> </head> <body> <!-- Contenu de la page respectant la syntaxe XML. --> </body> </html>
Nouvelles balises
- section : définit les sections dans un document. Tels que les chapitres, en-têtes, pieds de page, ou toutes autres sections du document.
- article : partie indépendante du site, comme un commentaire.
- aside : associé à la balise qui le précède.
- header : spécifie une introduction, ou un groupe d'éléments de navigation pour le document.
- footer : définit le pied de page d'un article ou un document. Contient généralement le nom de l'auteur, la date du document a été écrit et / ou ses coordonnées.
- nav : définit une section dans la navigation.
- figure : définit des images, des diagrammes, des photos , du code etc…
- figcaption : légende pour la balise <figure>.
- audio : pour définir un son, comme la musique ou les autres flux audio (streaming).
- video : Insérer un contenu video en streaming.
- track : Insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise video.
- embed : définit un contenu incorporé, comme un plug-in.
- mark : définit un texte marqué.
- meter : Permet d’utiliser les mesures avec un minimum et maximum connus, pour afficher une jauge.
- progress : définit une barre de progression sur le travail en cours d’execution.
- time : définit une date ou une heure, ou les deux.
- canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.
- command : définit un bouton.
- details : précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande.
- keygen : permet de générer une clé (sécurisé) .
- output : représente le resultat d’un calcul.
- ruby, rt et rp : annotation ruby.
Il y a également de nouveaux types pour la balise input :
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
- search
- color
Nouveaux attributs
Pour la balise
<a>:media: permet de spécifier pour quel media ou device il est optimisé.type: définit le MIME de la cible URL.
Pour la balise
<area>:hreflang: spécifie le langage de l’url.media: permet de spécifier pour quel media ou device il est optimisé.rel: Indique la relation entre le document courant et l'URL cible.type: définit le MIME de la cible URL.
Pour la balise
<button>:autofocus: Indique que le bouton doit avoir le focus pendant le chargement de la page.form: spécifie à quel formulaire le bouton appartient.formaction: Spécifie où envoyer le form-data quand un formulaire est soumis. Remplace l'attribut action du formulaire.formenctype: Indique comment le form-data doit être encodée avant d’être envoyé à un serveur. Remplace l'attribut enctype du formulaire.formmethod: définit comment il faut envoyer le form-data.formnovalidate: si présent, indique que le formulaire ne doit pas être validé quand il est envoyé.formtarget: spécifie où ouvrir/exécuter l’action.
Pour la balise
<fieldset>:name: définit le nom du fieldset.disabled: désactive le fieldset.form: définit le formulaire du fieldset.
Pour la balise
<form>:autocomplete: auto complétion.novalidate: si présent le formulaire n’est pas validé lorsqu’il est soumis.
Pour la balise
<html>:manifest: Spécifie l'URL du manifeste.
Pour la balise
<iframe>:sandbox: Spécifie des restrictions sur le contenu de l'iframeseamless: Indique que l'iframe doit être parfaitement intégrée dans le document.srcdoc: le code HTML du document affiché dans l'iframe.
Pour la balise
<input>:autocomplete: auto completion.autofocus: définit le focus lors du chargement de la page.form: spécifie à quel formulaire le champ appartient.formaction: Remplace l'attribut "action" du formulaire. Indique l'URL à laquelle envoyer les données du formulaire.formenctype: Remplace l'attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur.formmethod: Remplace l’attribut "method" du formulaire. Définit la méthode HTTP d'envoi des données à l'URL.formnovalidate: Remplace l'attribut "novalidate" du formulaire. S'il est présent le champ de saisie ne devrait pas être validé lors de son envoi.formtarget: Remplace l'attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis.height: Définit la hauteur.list: Désigne un "datalist" contenant des options prédéfinies pour le champ de saisie.max: Indique la valeur maximale du champ d'entrée.min: Indique la valeur minimale du champ d'entrée.multiple: Si présent, l’utilisateur peut entrer plusieurs valeurs.pattern: Définit un "pattern".placeholder: Un conseil pour aider les utilisateurs à remplir le champ de saisie.required: Indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire.step: Indique l’intervalle entre les valeurs.
Pour la balise
<link>:sizes: Définit la taille, hauteur et largeur.
Pour la balise
<menu>:label: Label visible du menu.type: Définit le type de menu à afficher. La valeur par défaut est "list".
Pour la balise
<meta>:charset: Définit la table de caractères pour l'encodage de la page.
Pour la balise
<ol>:reversed: si présent, change l’ordre d’affichage.
Pour la balise
<script>:async: définit si le script doit être exécuté de manière asynchrone ou pas.
Pour la balise
<select>:autofocus: active le focus sur cet élément.form: définit un ou plusieurs formulaires pour le "select".
Pour la balise
<style>:scoped: Si présent, le style est appliqué uniquement sur le parent et les fils.
Pour la balise
<textarea>:autofocus: focus l’élément textarea.dirname: Indique le nom du textarea.form: définit une ou plusieurs formulaires pour le "textarea".maxlength: nombre maximum de caractères.placeholder: définit une astuce pour aider l’utilisateur.required: Indique que la valeur du champ de saisie est nécessaire.wrap: définit comment le texte est affiché dans le textarea.
Ainsi que les attributs globaux qui s'appliquent à toutes les balises :contenteditablecontextmenudata-*draggablehiddenon*(gestionnaires d'événements)spellcheck
Connexion et distribution 'P2P'
- HTML 5[2],[3],[4],[5],[6] se voit doté de la capacité de réaliser des connexions entre utilisateurs PeerToPeerConnection(), et également grâce aux websockets.
Changements dans les balises et attributs
Les balises suivantes ont été supprimées car leurs effets étaient purement représentatifs, ce qui est le rôle de CSS.
basefont,big,center,font,s,strike,tt,u,
Les balises
frame,framesetetnoframesont été supprimées elles-aussi, elles étaient déjà dépréciées car elles créaient des problèmes d'accessibilité et d'utilisation pour l'utilisateur final.Les balises suivantes ont elles aussi été supprimées :
acronymn'est plus incluse car elle créait beaucoup de confusions;appletest obsolète en faveur deobject;isindex, car elle peut être remplacée par l'utilisation des contrôleurs de formes;direst obsolète en faveur deul.
Enfin,
noscriptn'est fournie que dans la version HTML, elle n'est pas incluse dans la version XML.Dépréciation de balises
Dépréciation d'attributs
- Sur la balise a
- rev
- charset
- shape
- coords
- Sur la balise link
- rev
- charset
- target
- Sur la balise img
- name (préférer l'attribut id)
- longdesc
- Sur la balise iframe
- longdesc
- Sur la balise area
- nohref
- Sur la balise head
- nohref
- Sur la balise html
- version
- Sur la balise meta
- scheme
- Sur la balise object
- archive
- classid
- codebase
- declare
- standby
- Sur la balise param
- valuetype
- type
- Sur la balise td :
- axis
- scope
- Sur la balise th
- axis
API
HTML5 introduit huit nouvelles APIs qui pourront aider à créer des applications web et qui peuvent être utilisées ensemble avec de nouveaux éléments introduits pour les applications dont :
- une API de dessin 2D utilisée avec la nouvelle balise
canvas; - une API pour jouer des vidéos et des sons/musiques utilisée avec les nouvelles balises
videoetaudio; - une API utilisée pour les applications hors-lignes;
- une API d'édition en combinaison avec le nouvel attribut
contenteditable; - une API de drag and drop en combinaison avec l'attribut
draggable; - une API qui permet l'accès à l'historique et permet aux pages d'en ajouter pour prévenir les problèmes de bouton retour-en-arrière.
Références
- (fr) Le W3C confirme qu'HTML5 sera disponible en mai 2011 pour appel à commentaires, www.w3.org, le 14 février 2011
- W3C information :
- Regarding peer to peer connections: http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
- Regarding broadcast connections to the local network: http://www.w3.org/TR/2008/WD-html5-20080122/#broadcast
- Regarding TCP connections (in the encoded protocol): http://www.w3.org/TR/2008/WD-html5-20080122/#tcp-connections
- Complete proposed spec: http://www.w3.org/TR/2008/WD-html5-20080122/#network
- HTML 5 plans to allow peer to peer connections from javascript, but these connections will not be raw TCP. The complete spec can be found at http://dev.w3.org/html5/websockets/
- Smart Clients: ReverseHTTP & WebSockets
- Will HTML5 allow web apps to make peer-to-peer HTTP connections?
- P2P, audio et vidéo au menu du HTML 5
Voir aussi
Articles connexes
Liens externes
Wikimedia Foundation. 2010.
