HTML5 (2014-10-28)

../../_images/html5.png

English wikipedia definition

See also

HTML 5 (formerly and commonly spelled HTML5 ) is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it.

HTML 5 is the fifth and current major version of the HTML standard, and subsumes XHTML.

It currently exists in two standardized forms:

  • HTML 5.2 Recommendation by the World Wide Web Consortium (W3C, a broad coalition of organizations), intended primarily for Web content developers;

  • and HTML Living Standard by WHATWG (a small consortium of four browser vendors), intended primarily for browser developers, though it also exists in an abridged Web developer version.

There are minor conflicts between the two groups’ specifications.

HTML 5 was first released in public-facing form on 22 January 2008, with a major update and “W3C Recommendation” status in October 2014.

Its goals are to improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices such as Web browsers, parsers, etc., without XHTML’s rigidity; and to remain backward-compatible with older software.

HTML 5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML; the HTML 4 and XHTML specs were announced as superseded by HTML 5.2 on 27 March 2018.

HTML 5 includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.

For the same reasons, HTML 5 is also a candidate for cross-platform mobile applications, because it includes features designed with low-powered devices in mind.

Many new syntactic features are included.

To natively include and handle multimedia and graphical content, the new <video>, <audio> and <canvas> elements were added, and support for scalable vector graphics (SVG) content and MathML for mathematical formulas.

To enrich the semantic content of documents, new page structure elements such as <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure> are added.

New attributes are introduced, some elements and attributes have been removed, and others such as <a />, <cite>, and <menu> have been changed, redefined, or standardized.

The APIs and Document Object Model (DOM) are now fundamental parts of the HTML 5 specification and HTML 5 also better defines the processing for any invalid documents.

HTML5 French wikipedia definition

HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web).

Cette version a été finalisée le 28 octobre 2014.

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é lancé 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 clôt les ajouts de fonctionnalités le 22 mai 2011, annonçant une finalisation de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 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 des développeurs d’applications Web.

Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d’applications.

Nouveaux éléments HTML5

  • 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 en streaming.

  • track : permet d’insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise vidéo.

  • 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’exécution.

  • time : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en octobre 2011 en faveur de la balise data6 avant d’être réintroduite7.

  • 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 par Internet Explorer 9. Il n’est donc pas recommandé de l’utiliser8,9[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 et rp : annotations ruby.

Nouveaux attributs HTML5

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 le langage de l’url.

  • 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 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é 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 : 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’iframe

  • seamless : 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 complé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é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 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.

nouveaux types :

  • datetime

  • datetime-local

  • date

  • month

  • week

  • time

  • tel

  • number

  • range

  • email

  • url

  • search

  • color

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 :

  • contenteditable

  • contextmenu

  • data-*

  • draggable

  • hidden

  • on* (gestionnaires d’événements)

  • spellcheck