Conception & Réalisation de sites Web

Les balises "meta" ou métabalises

Des métadonnées placées dans l'entête

Les balises meta vont nous permettre de donner au navigateur des informations sur la page web à afficher. On dit que ce sont des métadonnées (du grec meta "après" et du latin data "informations", soit une donnée servant à définir ou décrire une autre donnée).

Les balises meta seront toujours placée entre les balises <head> et </head>. En effet, nous avons vu précédemment que l'entête d'un document HTML contient des informations sur la page alors que le corps (body) contient tout ce qui doit être affiché.

On distingue 2 types de balises méta :

  • Les balises méta "name" qui permette de décrire la page.
  • Les balises méta "http-equiv" qui envoie des informations supplémentaires via le protocole HTTP.

Les balises méta "name"

Elles s'utilisent toujours comme ceci :
<meta name="mot clé ici" content="valeur ici" />

Elles nous permettent notamment de préciser :

  • L'auteur de la page grâce au mot clé author :

<meta name="author" content="Nom de la personne qui a réalisé la page" />

  • Une description de la page grâce au mot clé description :

<meta name="description" content="Brève description de la page ici" />

  • Une liste de mots clés pour qualifier la page grâce au mot clé keywords. Ces mots clés seront séparés par des virgules :

<meta name="keywords" content="mot clé 1, autre mot clé, blabla" />

  • Le logiciel utilisé pour réaliser la page grâce au mot clé generator :

<meta name="generator" content="Adobe Dreamweaver" />

Les balises méta "http-equiv"

Elles s'utilisent comme ceci :
<meta http-equiv="mot clé ici" content="valeur ici" />

Elles nous permettent :

  • de préciser l'encodage utilisé pour la page grâce au mot clé Content-Type. Vous pouvez en savoir plus l'encodage des fichiers en cliquant sur L'encodage et les caractères spéciaux. Exemple pour un encodage au format UTF-8 :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  • de préciser si la page ne doit pas être sauvegardée dans la cache du navigateur (c'est à dire que la page ne sera pas mémorisée dans les fichiers temporaires du visiteur) grâce au mot clé pragma :

<meta http-equiv="pragma" content="no-cache" />

  • de préciser une date d'expiration pour la page grâce au mot clé expires :

<meta http-equiv="expires" content="Tue, 20 Aug 1996 14:25:27 GMT" />

  • de demander à la page de se raffraichir (= se réactualiser) toutes les N secondes grâce au mot clé refresh. Par exemple, pour que la page se réactualise toutes les 30 secondes :

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

  • de rediriger le visiteur vers une autre page au bout de N secondes grâce au mot clé refresh et à la précision URL=chemin-vers-ma-page. Par exemple, pour rediriger le visiteur sur le site alistapart.com au bout de 2 secondes :

meta http-equiv="refresh" content="2;URL=http://www.alistapart.com/" />

Notez bien : Le W3C recommande cependant de faire ce type de redirection de préférence côté serveur (c'est à dire en PHP, ASP...) mais ceci peut toujours servir.

En résumé

Exemple d'entête plus complète pour une page web :

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ma page</title>
   <meta name="author" content="Erwan Dupeux-Maire" />
   <meta name="keywords" content="html, xhtml, conception, creation de site web, realisation de site web, formation, cours" />
   <meta name="description" content="Support du cours de conception et réalisation de sites Web en XHTML" />
</head>
<body>
   Contenu ici
</body>
</html>

Balise Indication donnée au navigateur
<meta /> Informations sur la page. Cette balise propose les attributs suivants :
name="Val", Val étant le nom de l'information envoyée
http-equiv="Val", Val étant le nom de l'information envoyée via le protocole http
content="Val", Val étant l'information envoyée au navigateur.
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!