HTML <meta> Tag
Exemple
Décrivez les métadonnées dans un document HTML :
<head>
<meta charset="UTF-8">
<meta name="description" content="Tutoriels Web gratuits">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <meta> définit des métadonnées sur un document HTML. Les métadonnées sont des données (informations) sur d'autres données.
Les balises <meta> se trouvent toujours à l'intérieur de l'élément <head> et sont généralement utilisées pour spécifier l'encodage des caractères, la description de la page, les mots-clés, l'auteur du document et les paramètres de la fenêtre d'affichage.
Les métadonnées ne s'affichent pas sur la page, mais elles sont analysables par machine.
Les métadonnées sont utilisées par les navigateurs (pour afficher le contenu ou recharger la page), les moteurs de recherche (mots-clés) et d'autres services web.
Il existe une méthode permettant aux concepteurs web de contrôler la fenêtre d'affichage (la zone visible de l'utilisateur sur une page web) via la balise <meta> (voir l'exemple "Définir la fenêtre d'affichage" ci-dessous).
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <meta> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| charset | jeu_de_caractères | Spécifie l'encodage des caractères pour le document HTML |
| content | texte | Spécifie la valeur associée à l'attribut http-equiv ou name |
| http-equiv | content-security-policy content-type default-style refresh | Fournit un en-tête HTTP pour l'information/valeur de l'attribut content |
| name | application-name author description generator keywords viewport | Spécifie un nom pour les métadonnées |
Attributs Globaux
La balise <meta> prend également en charge les Attributs Globaux en HTML .
Plus d'Exemples
Définir des mots-clés pour les moteurs de recherche :
<meta name="keywords" content="HTML, CSS, JavaScript"> Définir une description de votre page web :
<meta name="description" content="Tutoriels Web gratuits pour HTML et CSS"> Définir l'auteur d'une page :
<meta name="author" content="John Doe"> Rafraîchir le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30"> Définir la fenêtre d'affichage pour que votre site web soit agréable sur tous les appareils :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Définir la Fenêtre d'Affichage
La fenêtre d'affichage est la zone visible de l'utilisateur sur une page web. Elle varie selon l'appareil - elle sera plus petite sur un téléphone mobile que sur un écran d'ordinateur.
Vous devez inclure l'élément <meta> suivant dans toutes vos pages web :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Cela donne des instructions au navigateur sur la manière de contrôler les dimensions et le zoom de la page.
La partie width=device-width définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui variera en fonction de l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple d'une page web sans la balise meta viewport, et la même page web avec la balise meta viewport :
Astuce : Si vous parcourez cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir la différence.
Vous pouvez en savoir plus sur la fenêtre d'affichage dans notre Tutoriel sur le Design Web Réactif - La Fenêtre d'Affichage .
Pages Associées
Tutoriel HTML : En-tête HTML
Référence DOM HTML : Objet Meta
Paramètres CSS par Défaut
Aucun.