--- title: ' : l''élément de métadonnées du document' slug: Web/HTML/Element/meta tags: - Element - HTML - Reference - Web translation_of: Web/HTML/Element/meta ---
L'élément HTML <meta>
représente toute information de métadonnées qui ne peut pas être représentée par un des éléments ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}})
Comme tous les autres éléments, cet élément inclut les attributs universels.
Note : Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.
lang
d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des noms MIME préférés d'un encodage comme spécifié par l'IANA. Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations :
JIS_C6226-1983
, JIS_X0212-1990
, HZ-GB-2312
, JOHAB
, la famille d'encodage ISO-2022
et la famille d'encodage EBCDIC
.Les auteurs ne doivent pas utiliser CESU-8
, UTF-7
, BOCU-1
et SCSU
. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (Cross-site scripting) ont pu être recensées avec ces encodages.
Les auteurs ne devraient pas utiliser UTF-32
car certains algorithmes d'encodage HTML5 ne peuvent différiencer UTF-32
de UTF-16
.
<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">
utilisé avant HTML5. Ici IANAcharset
correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.content-language
{{obsolete_inline}}lang
de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.Content-Security-Policy
content-type
{{obsolete_inline}}content-type
appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère 'text/html
' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '; charset=
IANAcharset
' où IANAcharset
est l'appellation MIME du jeu de caractères, présentée par l'IANA
refresh
;url=
' ainsi qu'une URL valide.set-cookie
{{obsolete_inline}}{{non-standard_inline}}application-name
, qui définit le nom de l'application web utilisée dans la page
author
, définit le nom de l'auteur du document (pas de contrainte de format)description
, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.generator
, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)keywords
, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.referrer
qui contrôle l'en-tête HTTP Referer
attachée aux requêtes envoyées à partir du document :
no-referrer |
Aucun en-tête HTTP Referer n'est envoyé. |
origin |
Seule l'origine du document est envoyée. |
no-referrer-when-downgrade |
L'origine est envoyée envers les URL qui sont aussi sécurisée que la page courante (https→https). Aucun référent n'est envoyé lorsque l'URL est moins sécurisée (https→http). Cette valeur est la valeur par défaut. |
origin-when-crossorigin |
L'URL complète (sans les paramètres) est envoyée pour les requêtes provenant de la même origine. Dans les autres cas, seule l'origine est envoyée. |
same-origin |
Un référent est envoyé pour les sites d'origine équivalente, mais les requêtes entre différentes origines ne contiendra pas de référent. |
strict-origin |
Seule l'origine du document est envoyée pour les destinations a priori aussi sécurisées que la page courante (HTTPS->HTTPS) mais cette information n'est pas envoyée vers une destination moins sécurisée (HTTPS->HTTP). |
strict-origin-when-cross-origin |
L'URL complète est envoyée pour une requête provenant de la même origine. Seule l'origine du document est envoyée pour les destinations aussi sécurisées que la page (HTTPS->HTTPS), aucun en-tête n'est envoyé pour les destinations moins sécurisées (HTTPS->HTTP). |
unsafe-URL |
L'URL complète (sans les paramètres) est envoyée pour les requête d'origines équivalents et pour les autres requêtes (cross-origin). |
Notes:
always
, default
et never
.<meta name="referrer">
(grâce à document.write
ou appendChild
) rend le comportement imprévisible.no-referrer
qui est appliquée.theme-color
qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attribut content
contiendra une couleur valide au sens CSS (cf. {{cssxref("<color>")}}).color-scheme
Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.). <meta name="color-scheme">
sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).
La valeur de {{htmlattrxref("content","meta")}} pour color-scheme
peut être :
normal
[light
| dark]+
only light
only dark
n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :
<meta name="color-scheme" content="dark light">
Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS {{cssxref("color-scheme")}}. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristique prefers-color-scheme
.
Cet attribut peut également avoir une valeur définie dans une liste plus large : WHATWG Wiki MetaExtensions. Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :
creator
, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments {{HTMLElement("meta")}} devront être utilisésgooglebot
, synonyme de robots
, est suivi par Googlebot, le robot de Google qui indexe les pagespublisher
, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.robots
, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser :
Valeur | Description | Utilisé par |
---|---|---|
index |
Permet au robot d'indexer la page | Tous |
noindex |
Interdit au robot d'indexer la page | Tous |
follow |
Permet au robot de suivre les liens contenus dans la page | Tous |
nofollow |
Interdit au robot de suivre les liens contenus dans la page | Tous |
none |
Synonyme de noindex , nofollow |
|
noodp |
Empêche que la description Open Directory Project si celle-ci est présente, soit affichée dans les résultats du moteur de recherche | |
noarchive |
Empêche le moteur de recherche de mettre en cache le contenu de la page | Google, Yahoo |
nosnippet |
Empêche l'affichage de la description de la page dans les résultats du moteur de recherche | |
noimageindex |
Empêche la page d'apparaître en tant que page de référence ayant permis l'indexation de l'image | |
noydir |
Empêche l'utilisation et l'affichage de la description Yahoo Directory parmi les résultats du moteur de recherche, si celle-ci est présente | Yahoo |
nocache |
Synonyme de noarchive |
Bing |
noindex
fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichier robots.txt
). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page.index
et noindex
, ou follow
et nofollow
. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures.X-Robots-Tags
: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.slurp
, synonyme de robots
, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :
viewport
, qui donne une indication quant à la taille du viewport (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :Valeur | Valeurs possibles | Description |
---|---|---|
width |
un nombre entier positif ou le mot-clé device-width |
Définit la largeur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché. |
height |
un nombre entier positif ou le mot-clé device-height |
Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché. |
initial-scale |
un nombre positif entre 0.0 et 10.0 |
définit le ratio entre la taille de l'écran du terminal (device-width en portrait ou device-height en paysage) et la taille de la zone d'affichage. |
maximum-scale |
un nombre positif entre 0.0 et 10.0 |
définit la valeur maximale du zoom possible. Doit être supérieur ou égal à minimum-scale , sinon le comportement est indéterminé |
minimum-scale |
un nombre positif entre 0.0 et 10.0 |
définit la valeur minimale du zoom possible. Doit être inférieur ou égal à maximum-scale , sinon le comportement est indéterminé |
user-scalable |
un booléen (yes ou no ) |
Si la valeur est no , l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est yes . |
Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :
<!-- En HTML5 --> <meta charset="utf-8"> <!-- Rediriger la page après 3 secondes --> <meta http-equiv="refresh" content="3;url=http://www.mozilla.org">
Les pages utilisant une valeur de refresh
trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.
Désactiver la possibilité de zoom avec user-scalable: no
empêche les personnes à faible vision de lire et de comprendre le contenu de la page.
Catégories de contenu | Contenu de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est utilisé : du contenu de flux ou du contenu phrasé. |
---|---|
Contenu autorisé | Aucun cet élément est un élément vide. |
Omission de balises | Étant un élément vide, la balise de début doit être présente et la balise de fin doit être absente. |
Éléments parents autorisés | <meta charset> , <meta http-equiv> : un élément {{HTMLElement("head")}}. Si l'attribut {{htmlattrxref("http-equiv", "meta")}} n'est pas une déclaration d'encodage, l'élément peut également être au sein d'un élément {{HTMLElement("noscript")}} lui-même contenu par un élément {{HTMLElement("head")}}.<meta name> : tout élément acceptant du contenu de métadonnées.<meta itemprop> : tout élément acceptant du contenu de métadonnées ou du contenu phrasé. |
Rôles ARIA autorisés | Aucun. |
Interface DOM | {{domxref("HTMLMetaElement")}} |
Spécification | État | Commentaires |
---|---|---|
{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}} | {{Spec2('Referrer Policy')}} | Définition des valeurs et de la sémantique associée pour <meta name="referrer"> . |
{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}} | {{Spec2('HTML WHATWG')}} | Ajout de l'attribut itemprop |
{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}} | {{Spec2('HTML5 W3C')}} | Ajout de l'attribut charset |
{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}} | {{Spec2('HTML4.01')}} |
{{Compat("html.elements.meta")}}