HTML <meta> nom Attribut
Exemple
Utilisez l'attribut name pour définir une description, des mots-clés et l'auteur d'un document HTML. Définissez également le viewport pour contrôler les dimensions et l'échelle de la page sur différents appareils :
<head>
<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> L'attribut name spécifie le nom des métadonnées.
L'attribut name définit un nom pour l'information/valeur de l'attribut content .
Remarque : Si l'attribut http-equiv est défini, l'attribut name ne doit pas l'être.
HTML5 a introduit une méthode permettant aux concepteurs Web de contrôler le viewport (la zone visible d'une page Web pour l'utilisateur) via la balise <meta> (voir l'exemple "Définir le viewport" ci-dessous).
Support des navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| name | Oui | Oui | Oui | Oui | Oui |
Syntaxe
<meta name=" valeur "> Valeurs des attributs
| Valeur | Description |
|---|---|
| application-name | Spécifie le nom de l'application Web que la page représente |
| author | Spécifie le nom de l'auteur du document. Exemple : <meta name="author" content="John Doe"> |
| description | Spécifie une description de la page. Les moteurs de recherche peuvent utiliser cette description pour l'afficher avec les résultats des recherches. Exemple : <meta name="description" content="Tutoriels web gratuits"> |
| generator | Spécifie l'un des logiciels utilisés pour générer le document (non utilisé sur les pages écrites à la main). Exemple : <meta name="generator" content="FrontPage 4.0"> |
| keywords | Spécifie une liste de mots-clés séparés par des virgules - pertinents pour la page (informe les moteurs de recherche de quoi parle la page). Exemple : <meta name="keywords" content="HTML, balise meta, référence de balise"> |
| viewport | Contrôle le viewport (la zone visible d'une page Web pour l'utilisateur). Le viewport varie selon l'appareil et sera plus petit sur un téléphone mobile que sur un écran d'ordinateur. Vous devez inclure l'élément <meta> viewport suivant dans toutes vos pages Web : <meta name="viewport" content="width=device-width, initial-scale=1.0"> Un élément <meta> viewport donne des instructions au navigateur sur la façon de contrôler les dimensions et l'échelle 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 le viewport dans notre Tutoriel sur le design web réactif - Le tutoriel sur le viewport . |
