HTML5 — Wikipédia

Wiki Loves Monuments : photographiez un monument historique, aidez Wikipédia et gagnez !

# HTML5

Un article de Wikipédia, l'encyclopédie libre.

| Cet article contient une ou plusieurs listes. Le texte gagnerait à être rédigé sous la forme de paragraphes synthétiques, plus agréables à la lecture.

HTML5

Extension | HTML5: .html, .htm XHTML5: .xhtml, .xht, .xml
Type MIME | `HTML5: text/html XHTML5: application/xhtml+xml, application/xml`
Développé par | W3C
Type de format | Hypertexte
Extension du | HTML 4 et XHTML 1.1
Standard(s) | W3C HTML5
Spécification | Format ouvert

HTML5 (HyperText Markup Language 5) est la dernière révision majeure d'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[1], et encourage les développeurs Web à utiliser HTML 5 dès ce moment.

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

## Contexte historique[ modifier | modifier le code]

Article détaillé : HTML.

## Changements par rapport à HTML 4.X et XHTML 1.X[ modifier | modifier le code]

### Spécifications[ modifier | modifier le code]

Les spécifications sont publiées par le W3C http://www.w3.org/TR/html5/

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !

### Doctype[ modifier | modifier le code]

Tout comme les pages HTML ou XHTML, les documents HTML5 nécessitent une déclaration Doctype[2] indiquant la méthode standard de rendu par le navigateur. Dans le cas de HTML 5, il faut préciser «<!DOCTYPE html>» au début de tous document en HTML. 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[ modifier | modifier le code]

[Dérouler]
Exemple de code source

    <!DOCTYPE html>
    <html lang="fr">

    	<head>
    		<meta charset="utf-8">
    		<title>titre de la page</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" media="screen">

    	</head>

    	<body>

    		<header>
    			<!-- menu du haut -->
    			<nav>
    				<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>
    				<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>
    						<a href="mon-url"><img src="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>
    					<figure>
    						<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
    					</figure>
    				</section>
    			</article>
    		</div>

    		<footer>
    			<!-- menu du bas -->
    			<nav>
    				<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>

[Dérouler][Enrouler]

Voir aussi : html5-profile

La déclaration du Doctype n'est pas sensible à la casse et il n'y a plus de référence à une DTD (Document Type Definition, ou Définition de Type de Document, document permettant de décrire un modèle de document SGML ou XML).

### Encodage[ modifier | modifier le code]

Le processus de détection de l'encodage a également été modifié et s'effectue dans l'ordre :

1. Vérification de la présence d'un header HTTP "Content-Type" ;
2. Détection du BOM en début de fichier ;

## Solutions[ modifier | modifier le code]

Aujourd'hui quelques produits (logiciels ou outils sur le Web) permettent de créer plus ou moins facilement des contenus HTML5 comme :

- Google Web Designer (en)[3] ;
- pixappy designer[4].

### XHTML5[ modifier | modifier le code]

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. 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 les espace 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>
    <html xmlns="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>

### Nouveaux éléments[ modifier | modifier le code]

| Cet article ou cette section relève du guide pratique, ce qui n'est pas de nature encyclopédique (juillet 2015). Vous pouvez reformuler les passages concernés, ou remplacer ce bandeau soit par {{pour Wikilivres}} (ou {{pour Wikibooks}}), {{pour Wikiversité}}, ou {{Pour Wikivoyage}}, afin de demander le transfert vers un projet frère plus approprié.

- `main` : définit le contenu principal de la page, il doit être unique dans la page
- `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 à 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` : Insérer un contenu vidéo en streaming.
- `track` : 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 data [5] avant d'être réintroduite[6].
- `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'utiliser[7][8].
- `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[ modifier | modifier le code]

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 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 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 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`

### Connexion et distribution P2P[ modifier | modifier le code]

- HTML 5[9],[10],[11],[12],[13] 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[ modifier | modifier le code]

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !

Les balises suivantes sont supprimées car leurs effets étaient purement représentatifs, ce qui est le rôle de CSS.

- `basefont`,
- `big`,
- `center`,
- `font`,
- `strike`,
- `tt`,
- `u`,

Les balises `frame`, `frameset` et `noframes` ont été supprimées elles aussi ; elles étaient déjà désuètes car elles créaient des problèmes d'accessibilité et d'utilisation pour l'utilisateur final.

Les balises suivantes sont elles aussi supprimées :

- `acronym` n'est plus incluse car elle créait beaucoup de confusions;
- `applet` est remplacé par `object`;
- `isindex`, car elle peut être remplacée par l'utilisation des contrôleurs de formes;
- `dir` est obsolète en faveur de `ul`.

Enfin, `noscript` n'est fourni que dans la version HTML, il n'est pas inclus dans la version XML.

### Obsolescence d'attributs[ modifier | modifier le code]

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !

Sur la balise a

- charset
- coords
- name (préférer l'attribut id)
- methods
- rev
- shape
- urn

Sur la balise area

- nohref

Sur la balise embed

- name (préférer l'attribut id)

Sur la balise form

- accept

Sur la balise head

- profile
- nohref

Sur la balise html

- version

Sur la balise iframe

- longdesc

Sur la balise input

- ismap
- usemap

Sur la balise img

- longdesc
- lowsrc
- name (préférer l'attribut id)

Sur la balise link

- charset
- methods
- rev
- target
- urn

Sur la balise meta

- scheme

Sur la balise object

- archive
- classid
- code
- codebase
- codetype
- declare
- standby

Sur la balise option

- name (préférer l'attribut id)

Sur la balise param

- type
- valuetype

Sur la balise script

- event
- for
- language

Sur la balise table

- datapagesize
- summary

Sur la balise td

- axis
- scope

Sur la balise th

- axis

### API[ modifier | modifier le code]

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !
Avancées de la spécification HTML5 et des API associées.

HTML5 introduit huit nouvelles API 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 `video` et `audio` ;
- 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 de navigation et permet aux pages d'en ajouter pour prévenir les problèmes de bouton retour-en-arrière.

De plus des API tierces viennent s'intégrer à ce standard, telles que WebGL du Khronos Group permettant d'ajouter aux pages du contenu 3D.

## Controverse - Verrou numérique[ modifier | modifier le code]

Fin 2012, une campagne menée par plusieurs associations de défense des libertés numériques, dont la Free Software Foundation[14], tente d'attirer l'attention sur l'inclusion de verrous numériques (DRM) dans la norme HTML5[15].

## Notes et références[ modifier | modifier le code]

1. ↑ (fr) Le W3C confirme qu'HTML5 sera disponible en mai 2011 pour appel à commentaires [archive], www.w3.org, le 14 février 2011
2. ↑ W3C Working Draft [archive]
3. ↑ http://techcrunch.com/2014/08/05/googles-html5-web-designer-gets-animation-tools-deeper-adwords-and-doubleclick-integrations/ [archive]
4. ↑ http://www.pixappy.com [archive].
5. ↑ Bug 13240 - Consider replacing with [archive]
6. ↑ W3C Adds Time Element Back to HTML5 [archive]
7. ↑ http://www.w3schools.com/tags/att_command_type.asp [archive]
8. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/command [archive]
9. ↑ W3C information :
   - Regarding peer to peer connections: http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer [archive]
   - Regarding broadcast connections to the local network: http://www.w3.org/TR/2008/WD-html5-20080122/#broadcast [archive]
   - Regarding TCP connections (in the encoded protocol): http://www.w3.org/TR/2008/WD-html5-20080122/#tcp-connections [archive]
   - Complete proposed spec: http://www.w3.org/TR/2008/WD-html5-20080122/#network [archive]
10. ↑ 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/ [archive]
11. ↑ Smart Clients: ReverseHTTP & WebSockets [archive]
12. ↑ Will HTML5 allow web apps to make peer-to-peer HTTP connections? [archive]
13. ↑ P2P, audio et vidéo au menu du HTML 5 [archive]
14. ↑ Dites au W3C : nous ne voulons pas d'un Hollyweb http://www.defectivebydesign.org/no-drm-in-html5/fr [archive]
15. ↑ Levée de boucliers contre l'arrivée des DRM au sein du HTML5 http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du-html5.html [archive]

## Voir aussi[ modifier | modifier le code]

Sur les autres projets Wikimedia :

- HTML5, sur Wikimedia Commons
- HTML5, sur Wikibooks

### Bibliographie[ modifier | modifier le code]

- (en) Mark Pilgrim, HTML5 : Up and Running, O'Reilly,‎ août 2010, 205 p. (ISBN 9780596806026)
- (en) Jeremy Keith (préf. Jeffery Zeldman), HTML5 for Web Designers, A Book Apart,‎ 2012, 87 p. (ISBN 9780984442508)

### Articles connexes[ modifier | modifier le code]

- Microformat, microdonnée
- HTML5 sur terminaux mobiles
- Identificateur de fragment
- Polyfill

### Liens externes[ modifier | modifier le code]

- (en) Spécification
- (en) Différences par rapport à HTML 4
- (en) Test de compatibilité au standard HTML5

[afficher] v · m Accessibilité du Web
Acteurs internationaux | Web Accessibility Initiative (W3C)
Standards | WCAG · ATAG · UAAG · ARIA
Acteurs nationaux | WebAIM · RNIB · Accessiweb · Technosite · Accès pour Tous
Technologies compatibles | HTML · XHTML · HTML5 · CSS · JavaScript · SMIL · PDF · Flash
Méthodes d'application | Section 508 · SGQRI · UWEM · RGAA · Accessiweb · Anysurfer · Renow

[afficher] v · m Web sémantique

Contexte

- Web des données
- Données ouvertes
- World Wide Web
- Internet
- Réseau sémantique

Semantic Web Stack

Applications et interfaces

- Wiki sémantique
- Recherche sémantique
- Triplestore

Triplestore

Règles

- RIF
- Semantic Web Rule Language

Structure

- Ontologies
  - OWL
  - SKOS
- Taxinomies
  - RDFS

Requête

- SPARQL

Échange

- RDF
  - HTML5
  - Microdonnées
  - RDFa
  - GRDDL
  - Notation3
  - Turtle
  - RDF/XML (en)
  - N-Triplets (en)
  - JSON-LD (en)

Syntaxe

- XML
- XSD

Identifiant

- HTTP
- IRI
  - URI
  - URL

Caractères

- Unicode

Autres ontologies

- FOAF
- SIOC
- Dublin Core

Articles liés

- Folksonomie
- Web 2.0
- Web 3.0
- Open Database Connectivity
- Références
- Architecture de l'information
- Knowledge management
- Extraction de connaissances
- Intelligence collective
- Cartes topiques
- Carte heuristique
- Metadata
- Geotagging
- Logique de description
- Science Web
- Microformats

- Portail d’Internet
- Portail du Web sémantique

Ce document provient de « https://fr.wikipedia.org/w/index.php?title=HTML5&oldid=118210045 ».
Catégories :

- Format ouvert
- Standard du web
- HTML

| [+]
Catégories cachées :

- Article à délister
- Article contenant un appel à traduction en anglais
- Guide pratique
- Catégorie Commons avec lien local identique sur Wikidata
- Portail:Internet/Articles liés
- Portail:Informatique/Articles liés
- Portail:Médias/Articles liés
- Portail:Web sémantique/Articles liés