Glossaire HTML 5.

Un glossaire (en cours) des balises et des attributs du HTML aujourd’hui.

Références.

sommaire

Introduction.

Passez au HTML 5.

HTML 5 permet de donner du sens à ses pages Web et amène plein de nouvelles fonctionnalités. Il est bien supporté par tous les navigateurs récents : nous vous conseillons donc de l’utiliser désormais pour tous vos projets nécessitant HTML.

HTML 5 signifie HyperText Markup Language version 5. C’est le standard HTML le plus récent. Mieux : le doctype ne porte plus de numéro de version ! HTML pourrait donc devenir un standard vivant, qui évoluera dans le temps.

Remarque : dans la suite de ce glossaire, nous utiliserons simplement l’expression « HTML ».

sommaire

Commentez votre code.

Vous pouvez commenter votre code pour le rendre plus clair, et donc plus simple à maintenir dans le temps ou par d’autres personnes.

Les commentaires se rédigent ainsi :

<!-- un commentaire -->
<!-- un autre
 commentaire -->
sommaire

Validez vos pages.

Valider une page Web signifie vérifier qu’elle est conforme au standard HTML. C’est une étape incontournable du processus d’intégration Web : n’attendez pas que tout votre site soit codé pour le faire ! Pour valider vos pages, utilisez le validateur HTML du W3C (en).

Vous pouvez voir ici un document valide minimal puis un document valide classique.

Un document HTML valide minimal.
<!DOCTYPE html>
<title>Titre</title>
Un document HTML valide classique.
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8" />
 <title>Ma page, par Mon site</title>
</head>
<body>
 Mon contenu.
</body>
</html>

Remarque : les balises et attributs sont insensibles à la casse. Il est néanmoins conseillé de rédiger son code en minuscules : c’est plus clair et plus pratique.

sommaire

Les éléments.

En HTML, l’expression élément regroupe la balise, ses éventuels attributs ainsi que son contenu.

Le doctype et l’élément racine.

doctype
C’est le préambule obligatoire à tout document (c’est-à-dire : à toute page Web interprétée). Rien ne doit le précéder.
Le doctype HTML s’écrit désormais <!DOCTYPE html>.
html
L’élément html est la racine de votre document. Il est précédé du doctype. Tous les autres éléments sont enfants de html, et ses deux enfants directs sont les éléments head et body.
Il est conseillé de définir la langue principale du document dans html. On utilise pour cela la référence BCP 47 (en) de la langue voulue. Exemple :
<!DOCTYPE html>
<html lang="fr">
 <!-- un document en français -->
</html>
Les attributs de html peuvent être :
sommaire

Les métadonnées du document.

Il s’agit d’un ensemble de métadonnées pour le document (typiquement : les éléments title, meta et link).
L’élément head est unique et contient au moins l’élément title.
Les attributs de html peuvent être les attributs globaux.
title
Il s’agit du titre du document, et ne correspond pas nécessairement au titre principal de la page.
C’est un élément unique.
Remarques :
  • le contenu de l’élément title doit être compréhensible et indépendant du contexte du site (par exemple, dans un historique de navigation ou dans des résultats de recherche) ;
  • il doit être explicite, car il sera lu par les internautes dans les résultats des moteurs de recherche ;
  •  il n’a pas de longueur maximale, mais il est conseillé de ne pas dépasser 64 caractères.
Les attributs de title peuvent être les attributs globaux.
base
C’est un élément unique qui contient :
  • soit l’attribut href, dont la valeur est une URL qui sert de base aux URL relatives de la page ;
  • soit l’attribut target ;
  • soit les deux.
La balise base est auto-fermante, et enfant de l’élément head.
Remarque : l’attribut manifest de l’élément html n’est pas affecté par l’attribut href de l’élément base.
Les attributs de base peuvent être :
Exemple d’utilisation :
<head>
 <title>Archives - Mon site</title>
 <base href="http://example.com/archives/" />
</head>
<body>
 <h1>Liste des archives</h1>
 <ul>
  <li><a href="foo.html">foo</a></li>
   <!-- cible: http://example.com/archives/foo.html -->
  <li><a href="/2005/bar.html">bar</a></li>
   <!-- cible: http://example.com/archives/2005/bar.html -->
 </ul>
<body>
Il permet de lier le document à d’autres ressources.
La balise link est auto-fermante, et est typiquement enfant de l’élément head.
Les attributs de link peuvent être :
Exemple d’utilisation :
<head>
 <title>Mon site</title>
 <link rel="icon" type="image/png" href="favicon.png" />
  <!-- Favicon et icone de raccourci -->
 <link rel="alternate" hreflang="de" href="http://example.com/de/" />
  <!-- Version allemande de mon site -->
 <link rel="license nofollow" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr" />
  <!-- Licence du site -->
</head>
sommaire

Les attributs.

Les attributs globaux.

accesskey
Sa valeur est un caractère. Il guide l’user agent dans la création d’un raccourci clavier, pour activer ou sélectionner un élément de la page.
class
Sa valeur est un ou plusieurs termes. Chaque terme devient ainsi une classe associée à l’élément, typiquement pour lui ajouter des styles ou des fonctionnalités. Une même classe peut être utilisée sur plusieurs éléments.
Remarque : il est conseillé d’utiliser des valeurs d’attribut class qui décrivent la nature de l’élément plutôt que l’apparence désirée.
Exemple d’utilisation :
<article>
 <h1 class="article_title">Un titre en grand !</h1>
 <section>
  <h1 class="section_title">Un titre plus petit.</h1>
 </section>
</article>
contenteditable
Sa valeur est un mot-clé. Il rend éditable ou non le contenu d’un élément.
La valeur de l’attribut contenteditable peut être :
  • true : le contenu est éditable ;
  • false : le contenu n’est pas éditable ;
  • inherit (valeur par défaut) : l’attribut hérite de la valeur utilisée dans l’élément parent.
contextmenu
Sa valeur est l’identifiant unique (voir id) d’un menu contextuel (voir menu).
dir
Sa valeur est un mot-clé. Il spécifie le sens de lecture du texte d’un élément.
La valeur de l’attribut dir peut être :
  • ltr : lecture de gauche à droite ;
  • rtl : lecture de droite à gauche ;
  • auto : valeur par défaut.
draggable
Sa valeur est un mot-clé. Il rend possible ou non le glissement d’un élément (équivaut au mouvement drag d’un drag and drop).
La valeur de l’attribut draggable peut être :
  • true : l’élément est glissable ;
  • false : l’élément n’est pas glissable ;
  • auto : valeur par défaut.
dropzone
Sa valeur est un mot-clé. Il spécifie le comportement d’un élément lorsqu’il reçoit un élément glissable valide.
Typiquement, la valeur de l’attribut dropzone peut être :
  • copy : l’élément glissé est copié ;
  • link : un lien vers l’élément glissé est généré ;
  • move : l’élément glissé se place sur le nouvel endroit indiqué.
hidden
Si cet attribut est présent, l’élément est masqué et l’user agent ne devrait même pas le servir.
Remarque : une règle CSS contraire prend le dessus sur cette valeur. Exemple :
<style>
 p { display: block; }
</style>
<p hidden>
 Ce contenu sera servi à l’utilisateur.
</p>
id
Sa valeur est un seul terme, qui permet d’associer un identifiant unique à un élément. Cet identifiant ne doit pas contenir d’espace.
lang
Sa valeur est un mot-clé. Il spécifie la langue principale du contenu d’un élément.
Chaque langue est donc identifiée par un mot-clé défini dans la référence BCP 47 (en).
spellcheck
Sa valeur est un mot-clé. Il active ou non la correction orthographique du texte éditable, si l’user agent le permet.
La valeur de l’attribut spellcheck peut être :
  • true (valeur par défaut) : la correction est active ;
  • false : la correction n’est pas active ;
  • inherit : l’attribut hérite de la valeur utilisée dans l’élément parent.
style
Permet d’ajouter des styles CSS à un élément, à l’image de l’élément style à l’échelle de la page.
Exemple d’utilisation :
<p>Les derniers mots seront écrits
 <span style="color: red;">en rouge</span>
</p>
Remarque : pour masquer / afficher un élément, il faut utiliser l’attribut hidden et non l’attribut style.
tabindex
Sa valeur est un nombre entier. Il définit si un élément peut recevoir le focus, et l’ordre de séquence de focus sur les éléments de la page.
title
Sa valeur est du texte. En général, il permet d’accompagner un élément avec du texte additionnel, typiquement sous la forme d’une info-bulle ou d’une étiquette. Utilisé avec l’élément link, il permet d’appeler des feuilles de style alternatives.
translate
Sa valeur est un mot-clé. Il empêche ou non la traduction (si l’user agent le permet) du texte d’un élément, ainsi que le contenu de certains de ces attributs. Exemple :
<header><!-- translate=yes par défaut -->
Site officiel de <img src="logo.png"
 alt="My English Band" translate="no" />
</header>
La valeur de l’attribut translate peut être :
  • yes : la traduction est active ;
  • no : la traduction n’est pas active ;
  • inherit (valeur par défaut) : l’attribut hérite de la valeur utilisée dans l’élément parent.
sommaire

Les attributs particuliers.

crossorigin
Sa valeur est un mot-clé. Il permet à des images provenant de sites tiers d’être utilisées dans canvas, si ces sites l’autorisent.
href
Sa valeur est une URL. Selon l’usage, elle peut prendre diverses formes :
  • une URL absolue (exemple : http://example.com/) ;
  • une URL relatives (exemples : /admin/style.css, ./img/figure_3.png) ;
  • une ancre (exemple : #menu).
hreflang
Sa valeur est un mot-clé. Il spécifie la langue principale du contenu de la ressource ciblée par l’URL.
Les valeurs de langue sont définies dans la référence BCP 47 (en).
manifest
Sa valeur est l’URL d’un fichier contenant une liste de ressources à mettre en cache, typiquement pour le fonctionnement offline d’une application.
media
Il spécifie le type de média pour lequel un document a été conçu. Sa valeur doit constituer une requête média (en) valide.
name
Sa valeur est un texte, identifiant un élément. Ce texte doit faire au moins un caractère et ne pas commencer par un tiret bas (_).
rel
Sa valeur est un ou plusieurs mots-clés. Chaque mot-clé définit ici la relation entre le présent document et la destination de l’URL.
Consulter la liste des valeurs de rel (en).
sizes
Il définit la ou les dimensions possibles d’une icône. Ces dimensions sont définies en pixels CSS sous la forme <largeur>x<hauteur>. Les dimensions sont séparées par des espaces s’il y en a plusieurs. Si toutes les dimensions sont possibles (par exemple : une icône en SVG), la valeur de l’attribut reste vide.
Remarque : l’attribut sizes est uniquement utilisé avec les éléments possédant l’attribut rel="icon" (voir rel).
Exemple d’utilisation :
<link rel="icon" type="image/png" href="/img/favicon.png"
 sizes="16x16 48x48 96x96" />
target
Il indique un contexte de navigation. La valeur de cet attribut peut être :
  • _blank, qui est habituellement un nouveau contexte ;
  • _self, qui est habituellement le contexte en cours ;
  • _parent, qui est habituellement le contexte de niveau supérieur ;
  • _top, qui est habituellement le contexte de plus haut niveau ;
  • <foo>, qui cible par exemple une iframe dont l’attribut name a pour valeur foo.
type
Sa valeur est un mot-clé. Il permet d’identifier le format de données utilisé par un fichier.
Les identifiants de format de données (media types) sont définis dans la référence RFC 2046 (en).
sommaire

L’attribut itemprop.

L’attribut itemprop est utilisé pour le schéma de micro-données Schema.org. Il peut être ajouté à la balise body et tous ses enfants, ainsi qu’aux balises meta et link.

sommaire

À propos des rôles ARIA.

Les rôles font partie de la recommandation ARIA (en) (Accessible Rich Internet Applications) du W3C, pour favoriser l’accessibilité des documents et des applications Web (et notamment leur interprétation par les lecteurs d’écran). Le rôle par défaut d’une balise ne devrait pas être rappelé. Néanmoins, tant qu’une balise n’est pas pleinement supportée, on peut rappeler son rôle.