Balise HTML <meta>

Définition et utilisation

<meta> L'élément <meta> définit des métadonnées concernant le document HTML. Les métadonnées sont des données sur les données (information).

<meta> L'élément <head> est toujours situé Élément <head> À l'intérieur, ils sont généralement utilisés pour spécifier le jeu de caractères, la description de la page, les mots-clés, l'auteur du document et la configuration de la viewport :

Les métadonnées ne s'affichent pas sur la page, mais peuvent être interprétées par les machines.

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 réseau.

Astuce :Les éléments meta ont plusieurs utilisations différentes et peuvent être utilisés plusieurs fois dans un document HTML.

Astuce :Par <meta> Il existe une méthode pour que les concepteurs de pages Web puissent contrôler la viewport (c'est-à-dire la zone visible de l'utilisateur dans la page Web) (voir l'exemple "Définir la viewport" ci-dessous).

Attention :Chaque élément meta ne peut être utilisé qu'à une seule fin. Si vous souhaitez utiliser plusieurs caractéristiques, vous devez ajouter plusieurs éléments meta dans l'élément head.

Voir également :

Tutoriel HTML :En-tête HTML

Manuel de référence HTML DOM :Objet Meta

Exemple

<head>
  Déclarez l'encodage de caractères utilisé par cette page en UTF-8 :
  <meta name="description" content="Tutoriel Web gratuit">
  Définir des mots-clés pour les moteurs de recherche :
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Essayez-le vous-même

Attribut

Attribut Valeur Description
charset Jeu de caractères Définir l'encodage des caractères du document HTML.
content Texte Définir la valeur associée à l'attribut http-equiv ou name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • default-style
 refresh
Fournir des informations/valeurs pour l'attribut content sous forme d'en-tête HTTP.
  • name
  • application-name
  • author
  • description
  • generator
  • keywords
 viewport

Définir le nom des métadonnées.

<meta> Les attributs globaux Les balises supportent égalementLes attributs globaux de HTML

.

  1. Les éléments meta ont trois utilisations typiques :
  2. Spécifier les paires de métadonnées nom/valeur
  3. Déclarer l'encodage des caractères

Simuler les champs d'en-tête HTTP

1 : Spécifier diverses paires de métadonnées nom/valeur

Les éléments meta peuvent définir les métadonnées en utilisant des paires nom/valeur, pour cela, il faut utiliser les attributs name et content.

Définir des mots-clés pour les moteurs de recherche :

<meta name="keywords" content="HTML, CSS, JavaScript">

Définir une description concernant la page web :

<meta name="description" content="Free Web tutorials for HTML and CSS">

Définir l'auteur de la page :

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Configurer le viewport pour améliorer l'apparence du site sur divers appareils :

2 : Déclarer l'encodage des caractères

Déclarez l'encodage de caractères utilisé par cette page en UTF-8 :

<meta charset="UTF-8">

3 : Simuler les champs d'en-tête HTTP

Utilisez les attributs http-equiv et content pour rafraîchir le document toutes les 30 secondes :

<meta http-equiv="refresh" content="30">

Les changements dans HTML5

L'attribut charset a été ajouté dans HTML5.

L'attribut http-equiv peut avoir plusieurs valeurs différentes dans HTML4. Dans HTML5, seules les valeurs mentionnées dans cette page peuvent être utilisées.

L'attribut scheme de HTML4 n'est plus utilisé dans HTML5.

De plus, l'élément meta n'est plus utilisé pour spécifier la langue utilisée par la page Web.

configurer le viewport <meta> HTML5 a introduit une méthode qui permet aux concepteurs de site Web de

Vous devriez inclure les balises suivantes dans toutes les pages pour contrôler le viewport. <meta> Élément de viewport :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il fournit des instructions au navigateur sur la manière de contrôler la taille et le ratio d'agrandissement de la page.

width=device-width Certaines parties fixent la largeur de la page sur la largeur de l'écran de l'appareil (selon l'appareil).

Lorsque le navigateur charge pour la première fois la page,initial-scale=1.0 Réglage partiel du niveau initial de zoom.

Voici des exemples de pages Web sans balise meta viewport et avec balise meta viewport :

Astuce :Si vous consultez cette page sur un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir les différences.



Sans l'élément meta viewport


Avec l'élément meta viewport

Réglages CSS par défaut

Non.

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support