Balise HTML <méta>
Exemple
Décrire les métadonnées dans un document HTML :
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<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 <meta>balise définit les métadonnées d'un document HTML. Les métadonnées sont des données (informations) sur les données.
<meta> les balises vont toujours à l'intérieur de l'élément <head> et sont généralement utilisées pour spécifier le jeu de 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 seront pas affichées sur la page, mais sont analysables par la machine.
Les métadonnées sont utilisées par les navigateurs (comment 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 prendre le contrôle de la fenêtre d'affichage (la zone visible par l'utilisateur d'une page Web), via la <meta>balise (voir l'exemple "Configuration de la fenêtre d'affichage" ci-dessous).
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
Attributs globaux
La <meta>balise prend également en charge les attributs globaux en HTML .
Plus d'exemples
Définissez des mots-clés pour les moteurs de recherche :
<meta name="keywords" content="HTML, CSS, JavaScript">
Définissez une description de votre page Web :
<meta name="description" content="Free Web tutorials for
HTML and CSS">
Définir l'auteur d'une page :
<meta name="author" content="John Doe">
Actualiser le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30">
Configuration de la fenêtre d'affichage pour que votre site Web ait une belle apparence sur tous les appareils :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Définition de la fenêtre d'affichage
La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web. Cela varie selon l'appareil - il sera plus petit sur un téléphone portable que sur un écran d'ordinateur.
Vous devez inclure l' <meta>élément suivant dans toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
La width=device-widthpartie définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie selon l'appareil).
La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple de page Web sans la balise Meta Viewport et de la même page Web avec la balise Meta Viewport :
Astuce : Si vous naviguez sur 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 Responsive Web Design - Le didacticiel de la fenêtre d'affichage .
Pages connexes
Tutoriel HTML : En-tête HTML
Référence HTML DOM : Meta Object
Paramètres CSS par défaut
Rien.