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>
