par Alexandre Alapetite le 2003-04-11 ; mise à jour 2005-07-04

Les entêtes et les META informations en HTML

Je vais faire ici une brève présentation des entêtes, des META informations et d’autres points techniques qui me semblent importants dans des pages HTML.
Cette documentation est faite pour du XHTML 1.0 mais peu être utilisée avec peu de changements avec les autres versions de HTML.

English

Sommaire

Quitter

Les entêtes HTML

Une page HTML commence par une zone <head> destinée à contenir entre autres les META informations.
Voici ci-dessous un exemple (fictif, inspiré de cette page) :

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="fr-FR" />
<title>META informations HTML - Doc Alex</title>
<meta name="language" content="fr-FR" />
<meta name="robots" content="all" />
<meta name="description" content="Les META informations importantes en HTML" />
<meta name="keywords" content="HTML,META,codage,langue,ISO" />
<link rel="author" href="mailto:alex@france.fr" xml:lang="fr-FR" title="Alexandre Alapetite" />
<link rel="start" href="../../index.html" />
<link rel="up" href="../index.html" />
<link rel="contents" href="#sommaire" />
<link rel="help" href="../../divers/apropos/index.fr.html" />
<link rel="search" href="../../divers/recherche/index.fr.html" />
<link rel="alternate" href="index.en.html" hreflang="en-GB" xml:lang="en-GB" title="Documentation about META in English" />
<link rel="alternate" type="application/pdf" media="print" href="alx_meta.pdf" />
</head>

<body>
...
</body>
</html>

NB : Les balises META de type "http-equiv" sont plutôt destinées à simuler ou modifier les entêtes HTTP, alors que les autres sont plutôt destinées aux navigateurs et aux autres clients comme les moteurs de recherche.

Sommaire

Le codage et le type de document

L’information concernant le codage de la page est certainement une des plus importantes, surtout dans le contexte actuel d’internationalisation. Le codage est le nom du jeu de caractères utilisé dans le document.
Si vous êtes en Europe de l’ouest, (avec votre bloc-notes Windows par exemple) il y a de fortes chances que vos documents textes soient en ISO-8859-1.
Spécifier le codage permet au navigateur d’utiliser la bonne police, d’afficher les bons caractères, et non pas ceux d’un autre alphabet (comme grec, russe, chinois, ...), (voir Microsoft MSDN), ou des codages Unicode comme UTF-8.
Vous pouvez de plus conserver les caractères comme [é,è,à,å,ø,æ...] sans avoir à les remplacer par leur équivalents codés [&eacute;,&egrave;,&agrave;,&aring;,&aelig;,...]. Puisque l’on parle ici de pages web HTML, le type de document sera toujours text/html.
Le codage Unicode UTF-8 devrait être préféré autant que possible. Le type de document et le codage sont spécifiés par la ligne :

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

Cette ligne est à placer le plus haut possible dans les entêtes (en particulier avant <title>) car les navigateurs recalculent la page dès qu’ils rencontrent cette information.
Vous pouvez trouver plus d’information sur les différents codages chez MauveCloud, et pour Unicode chez Alan Wood.

Sommaire

La langue

Cette information est aussi essentielle. Cela permet de faire des recherches dans des pages en spécifiant la langue, d’appeler sans erreur des traducteurs automatiques, des synthétiseurs vocaux, d’être correctement indexé par les moteurs de recherches, etc...
La langue est spécifiée par les lignes :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<meta http-equiv="content-language" content="fr-FR" />
<meta name="language" content="fr-FR" />

C’est assez dommage, mais les outils travaillant plutôt sur le protocole HTTP ou sur le format de fichier utiliseront la première ligne, alors que les outils travaillant plutôt sur le contenu auront tendance à utiliser la seconde. La ligne avec xml:lang correspond, elle, au nouveau standard de définition des langues pour les documents XML.
Il est à noter qu’il est possible, pour les documents comportant plusieurs langues, de spécifier ces différentes langues par ordre d’importance en les séparant par une virgule ",".


Norme stricte

Il est préférable d’utiliser pour le code de la langue la norme la plus stricte (voir RFC-3066), qui est de la forme xx-XX :
2 caractères minuscules pour la langue "-" 2 caractères majuscules pour le pays.
Les deux premiers caractères sont pour la langue générale, par exemple français, selon la norme ISO-639-1, et les deux derniers caractères, facultatifs, pour préciser le pays selon la norme ISO-3166. Cela permet de faire la différence entre le français de France, et celui de Suisse ou du Canada par exemple. Le code pays doit être un pays qui utilise comme langue officielle la langue précédemment déclarée. Pour les quelques langues qui n’ont pas de pays officiel, il ne sera précisé aucun sous-code.

Quelques exemples :

Sommaire

Langues secondaires et alpha-3

Il existe une quantité de langues secondaires, moins utilisées, dont les codes sont répertoriés dans la norme ISO-639-2 et sont de la forme xxx.

Exemple :

NB : Il n’est pas recommandé d’utiliser la norme ISO-639-2 en alpha-3 (i.e. : 3 caractères alphabétiques) pour coder les langues déjà définies par un code alpha-2 dans la norme ISO-639-1, pour des raisons de compatibilité.
De même pour les pays, il n’est pas recommandé, s’il existe un code en alpha-2, d’utiliser les codes pays alpha-3. (autre lien : Nations Unies).

Sommaire

Une description

Il est possible de mettre une courte description de la page. Cette description est souvent utilisée par les moteurs de recherche (comme Lycos) comme commentaires en dessous des liens vers les pages résultant de la recherche.
La ligne à insérer est :

<meta name="description" xml:lang="fr-FR" content="Les META informations importantes en HTML" />

Il est intéressant de repréciser la langue dans cette balise si vous proposez une description dans plusieurs langues.

Sommaire

Les mots clefs

Une META information précisant les mots clefs de la page HTML est destinée aux moteurs de recherche. Cependant, il apparaît que ces derniers ne l’utilisent guère, cette META information n’étant en effet pas souvent présente, ni correcte dans les pages Web. Quelques petits moteurs l’utilisent néanmoins, comme le moteur de recherche dans les pages hébergées chez Free.
Elle se déclare de cette manière :

<meta name="keywords" xml:lang="fr-FR" content="HTML,META,codage,langue,ISO" />

Là encore, il peut être intéressant de repréciser la langue.

Sommaire

Les robots

Une META information est réservée pour préciser si on souhaite que la page soit indexée par les moteurs de recherche, et si on souhaite que les liens qu’elle contient soient analysés.
Il est logique de placer cette ligne avant les META description et keywords.

<meta name="robots" content="all" />

Les valeurs de "content" sont des combinaisons de "index" ou "noindex" avec "follow" ou "nofollow", avec deux raccourcis : "all" (par défaut) et "none" :
La valeur peut donc être "all", synonyme de "index,follow" pour une indexation complète, "noindex,follow" pour ne pas être indexé mais analyser les liens que la page contient, "index,nofollow" pour être indexé mais ne pas analyser les liens, et enfin "none", synonyme de "noindex,nofollow" pour aucune indexation ni suivi de liens. Il y a de plus quelques tags propriétaires, comme ceux de Google.

Sommaire

Il est recommandé d’utiliser la balise presque synonyme LINK lorsqu’il s’agit de META faisant intervenir un fichier externe. Cette balise est très utilisée et bien reconnue.
Parmi les comportements à encourager, il y a l’utilisation de LINK pour préciser des traductions dans d’autres langues de la page en cours, ou des versions alternatives de la page dans un autre format (PDF, Word, ...) en précisant le type de média visé (imprimante, synthétiseur vocal, PDA, ...). On pourra aussi spécifier un fichier contenant le glossaire, la table des matières, etc... pour faciliter la navigation.
On s’attachera à préciser le type de document, au format MIME, au moins pour les liens qui ne sont pas en HTML. Les autres renseignements comme hreflang (la langue du document pointé), charset (le type de codage), ou media (écran, imprimante, voix, ...) sont facultatifs et même peu souhaitables s’ils sont identiques au document courant.

Quelques exemples :

<link rel="stylesheet" type="text/css" href="monstyle.css" />
Pour lier une feuille de style CSS.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Affecte l’icône associée à l’adresse de cette page. Elle est aussi censée s’appeler favicon.ico et être à la racine du site.
<link rel="alternate" hreflang="en-GB" href="page.en.html" />
Propose une version dans une autre langue. (alternate associé à hreflang)
<link rel="alternate" type="application/msword" media="print" href="page.doc" />
Propose une version dans un autre format de fichier et/ou pour un autre média (ici l’imprimante). (alternate associé à media) Bien utilisé par Internet Explorer avec un document Word.
<link rel="next" href="page2.html" />
Page suivante dans une collection. Voir aussi les autres déplacements standards comme start,up,first,prev,next,last,... Bien utilisés par Mozilla, Opera, ...
<link rel="glossary" href="page_glossaire.html" />
Propose un glossaire en relation avec cette page.
<link rel="author" href="mailto:alex@france.fr" xml:lang="fr-FR" title="Alexandre Alapetite" />
Lien vers l’auteur de la page.

L’utilisation de LINK est de plus en plus indispensable dans un contexte où la navigation devient difficile, les médias se diversifient et les personnes handicapées sensorielles doivent pouvoir accéder à l’information.
Notons que l’utilisation de next, prev par exemple permet à des navigateurs comme Mozilla d’avoir une option de préchargement des pages voisines.

Barre de navigation de Mozilla 1.4a, utilisant LINK
Barre navigation Mozilla
Barre navigation Mozilla Barre navigation Mozilla

Quelques liens :   (anglais)

Sommaire

Autres META informations

D’autres META informations sont très utiles, et très utilisées, comme celles permettant de contrôler la redirection ou rafraîchissement automatique, ou la durée de validité d’une page. Ces META informations ne sont bien sûr à utiliser que lorsque cela est nécessaire.

<meta http-equiv="refresh" content="5; url=http://alexandre.alapetite.fr" />
Une redirection automatique vers une autre URL, après le nombre de secondes spécifié. Plus d’informations dans ma documentation sur les redirections.
<meta http-equiv="expires" content="Mon, 24 Nov 1980 09:20:00 GMT" />
Date (RFC 850) à partir de laquelle la page n’est plus valide, et devrait être rechargée.

Beaucoup d’autres META informations ont été proposées mais malheureusement, il n’y a pas encore vraiment de standardisation, malgré quelques projets, comme celui du Dublin Core. De plus, les navigateurs utilisent assez peu ces autres META informations.
Une liste des différentes META informations possibles peut être consultée ici. En voici quelques-unes, en vrac :

<meta name="author" content="Alexandre Alapetite" />
Le nom de l’auteur de la page.
<meta name="generator" content="Notepad" />
L’éditeur ou le logiciel utilisé pour créer la page.
<meta name="geo.position" content="43.923;4.828" />
Latitude et longitude terrestre du sujet traité, pour indexation par GeoURL ou GeoTags
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=23)" />
Pour déclencher une transition graphique sous Internet Explorer.
Sommaire

Déclaration du type de document, et validation

La déclaration du type de document est de plus en plus importante dans la tendance actuelle à la formalisation.
Plusieurs versions de HTML coexistent, HTML3.2, HTML4.01, XHTML2.0 pour les 3 dernières plus récentes, sans parler des autres documents XML. Aussi faut-il éviter les conflits de versions, qui entraînent des erreurs et des écarts importants d’affichage entre les navigateurs.

De plus, cette déclaration permet la validation, voire la correction automatique de la page par des outils, comme celui du W3C en ligne.
Cette validation est indispensable.

Je conseille de se conformer à la norme XHTML1.0 Transitional en tendant autant que possible vers XHTML1.0 Strict (XHTML 1.1). Cela se déclare comme ci-dessous :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">

Le XHTML étant plus formel, il permet une vérification précise, par des validateurs très simple, comme celui que je développe.
Il faut noter que cette déclaration est un peu différente, car la norme n’est pas tout à fait identique, pour les documents XHTML 1.0 mettant en place un FRAMESET :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">

Licence

Ce contenu est protégé par une licence Creative Commons Paternité - Partage des Conditions Initiales à l’Identique 2.0 France "BY-SA (FR)" [Creative Commons License]


Commentaires

object : Voir les commentaires

http://alexandre.alapetite.fr

Retour

XHTML 1.1 valide !