| HTML5 | ||
 | ||
 | ||
| Date de première version | 28 octobre 2014 | |
|---|---|---|
| Paradigme | Langage de balisage | |
| Auteur | WHATWG | |
| Développeur | WHATWG etW3C | |
| Dernière version | 5.2 (21 décembre 2017) | |
| Version en développement | 5.3 | |
| Typage | statique | |
| Influencé par | SGML | |
| A influencé | Wikicode,BBCode | |
| Écrit en | SGML | |
| Site web | (en)WHATWG et(en)W3C | |
| Extensions de fichiers | HTML: .html, .htm XHTML: .xhtml, .xht, .xml | |
modifier  | ||
HTML5 (HyperText MarkupLanguage 5) est la dernière révision majeure duHTML (format de données conçu pour représenter lespages web). Cette version a été finalisée le. HTML5 spécifie deuxsyntaxes d'un modèle abstrait défini en termes deDOM :HTML5 etXHTML5.
Le langage comprend également :
Le travail a été repris par leW3C en mars 2007 après avoir été lancé par leWHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de latechnologie. Le W3C clôt les ajouts de fonctionnalités le, annonçant une finalisation de la spécification en 2014[1], et encourage les développeurs Web à utiliser HTML5 dès ce moment. Fin 2016, la version 5.1 est officiellement publiée et présente plusieurs nouveautés qui doivent faciliter le travail desdéveloppeurs d'applications Web[2].
Le 18 janvier 2011, le W3C a introduit un logo pour représenter l'utilisation ou l'intérêt pour HTML5. Contrairement à d'autres badges précédemment émis par le W3C, cela n'implique pas la validité ou la conformité à une certaine norme. Depuis le1er avril 2011, ce logo est officiel[3].
Lors de sa présentation initiale au public, le W3C a annoncé le logo HTML5 comme une « identité visuelle à usage général pour un large éventail de technologies Web ouvertes, notamment HTML5, CSS, SVG, WOFF et autres »[4]. Certains défenseurs des normes Web, dont TheWeb Standards Project, ont critiqué cette définition de HTML5 en tant que terme générique, soulignant le flou de la terminologie et le potentiel de mauvaise communication[4]. Trois jours plus tard, le W3C a répondu aux commentaires de la communauté et a modifié la définition du logo, supprimant l'énumération des technologies associées[5]. Le W3C a ensuite déclaré que le logo « représente HTML5, la pierre angulaire des applications Web modernes »[3].
Tout comme les documentsHTML etXHTML, les documents HTML5 nécessitent une déclarationDoctype[6] indiquant la méthode standard derendu par le navigateur. Dans le cas de HTML5, la déclaration du Doctype n'est pas sensible à la casse et il n'y a plus de référence à uneDTD (Document Type Definition, ou Définition de Type de Document, document permettant de décrire un modèle de document SGML ou XML).Il faut simplement écrire<!DOCTYPE html> au début du document.
Toutefois, pour les documentsXML cette déclaration est facultative, le navigateur l'interprétant en mode standard par défaut. Un document utilisant la structure XML (XHTML5) doit être servi avec l'en-tête HTTPContent-Type: application/xhtml+xml.
<!DOCTYPE html><htmllang="fr"><head><metacharset="utf-8"><title>titre de la page</title><!-- meta --><metaname="description"content=""><metaname="author"content=""><!-- mon icon --><linkrel="shortcut icon"href="favicon.ico"><!-- mon template.css --><linkrel="stylesheet"href="main.css"media="screen"></head><body><header><!-- menu du haut --><nav><ul><li><ahref="mon-url"title="titre-du-lien">nom de mon lien</a></li><li><ahref="mon-url"title="titre-du-lien">nom de mon lien</a></li><li><ahref="mon-url"title="titre-du-lien">nom de mon lien</a></li></ul></nav></header><!-- contenu de ma page --><main><!-- article n°1 --><article><h1>titre de mon article</h1><p>texte de mon article</p><section><h2>sous-titre mon article</h2><p>texte de mon sous-titre</p><figure><ahref="mon-url"><imgsrc="url-de-mon-image"alt="nom-de-mon-image"></a></figure></section></article><!-- article n°2 --><article><h1>titre de mon article</h1><p>texte de mon article</p><section><h2>sous-titre mon article</h2><p>texte de mon sous-titre</p></section></article></main></body></html>
Le processus de détection de l'encodage a également été modifié et s'effectue dans l'ordre, la vérification de la présence d'unheaderHTTP « Content-Type », et ensuite à la détection duBOM en début de fichier.
Pour les documents XHTML5, l'auteur doit spécifier l'encodage dans leprologue XML, mais aussi le type de contenu : « application/xhtml+xml ». La globalité de la page doit être conforme à lasyntaxeXML. De par le caractère extensible du langage XML, il est possible d'ajouter d'autres balises (exemple :<mabalise></mabalise>) ; une telle extension nécessite de déclarer lesespaces de noms correspondants, sans quoi la page sera en erreur et le navigateur pourrait ne pas être 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><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"dir="ltr"><head><title>Exemple</title></head><body><!-- Contenu de la page respectant la syntaxe XML. --></body></html>
main : définit le contenu principal de la page, il doit être unique dans la page.section : définit les sections du document, telles que les chapitres, en-têtes, pieds de page.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 à laquelle le 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 : permet d’insérer un contenu vidéo enstreaming.track : permet d’insérer un sous-titre (au formatWebVTT) à une vidéo affichée avec la balise vidéo.embed : définit un contenu incorporé, comme unplug 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 unebarre de progression sur le travail en cours d’exécution.time : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en en faveur de la balisedata[7] avant d'être réintroduite[8].canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.command : définit un bouton. Cette balise est uniquement supportée parInternetExplorer 9. Il n'est donc pas recommandé de l'utiliser[9],[10][source insuffisante].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 résultat d’un calcul.ruby,rt etrp :annotations ruby.Pour la balise<a> :
media : permet de spécifier pour quel média ou appareil il est optimisé.type : définit le MIME de la cible URL.Pour la balise<area> :
hreflang : spécifie la langue de la ressource pointée.media : permet de spécifier pour quel média ou appareil il est optimisé.rel : indique la relation entre le document courant et l'URL cible.type : définit leMIME de la cible URL.Pour la balise<button> :
autofocus : indique que le bouton doit avoir lefocus 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é 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 : autocomplétion.novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.Pour la balise<html> :
manifest : URL de déclaration (manifest) des fichiers pour un usage hors ligne.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 : autocomplétion.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éthodeHTTP 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 motif.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.datetimedatetime-localdatemonthweektimetelnumberrangeemailurlsearchcolorPour 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></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)spellcheckLes élémentsbasefont,big,center,font,strike,tt etu sont supprimés car leur fonction était purement visuelle, ce qui est le rôle deCSS. Les élémentsframe,frameset etnoframes ont été supprimés car ils étaient déjà désuets et créaient des problèmes d'accessibilité et d'utilisation pour l'utilisateur final.
Les éléments suivants sont aussi supprimés :
acronym qui créait beaucoup de confusion ;applet remplacé parobject ;isindex remplacé par l'utilisation des contrôleurs de formes ;dir obsolète et remplacé parul.Enfin,noscript n'est fourni que dans la version HTML, il n'est pas inclus dans la version XML.
HTML5 introduit plusieurs nouvellesAPI qui peuvent aider à créer desapplications web et qui peuvent être utilisées ensemble, proposant de nouveaux éléments introduits pour les applications, et notamment :
De plus, des API tierces viennent s'intégrer à ce standard, telles queWebGL duKhronos Group permettant d'ajouter aux pages du contenu 3D.
Vers la fin de l'année 2012, une campagne menée par plusieurs associations de défense des libertés numériques, dont laFree Software Foundation[16], a tenté d'attirer l'attention sur l'inclusion deverrous numériques (DRM) dans la norme HTML5[17].
Le 18 septembre 2017[18], le W3C a normalisé les extensions pour médias chiffrés (Encrypted Media Extensions) en justifiant qu'elles « améliorent l'interopérabilité, la protection de la vie privée, la sécurité, l'accessibilité et l'expérience utilisateur lors du visionnage de films et télévision sur le Web ».
| Acteurs internationaux | |
|---|---|
| Standards | |
| Acteurs nationaux | |
| Technologies compatibles | |
| Méthodes d'application | |
| Contexte | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Semantic Web Stack |
| ||||||||||||||||||
| Autres ontologies | |||||||||||||||||||
| Articles liés | |||||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
| |||||||||||||||||
