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.
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.
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 [é,è,à,å,æ,...].
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.
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 ",".
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 :
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).
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.
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.
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.
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" /><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />favicon.ico et être à la racine du site.<link rel="alternate" hreflang="en-GB" href="page.en.html" />alternate associé à hreflang)<link rel="alternate" type="application/msword" media="print" href="page.doc" />alternate associé à media) Bien utilisé par Internet Explorer avec un document Word.<link rel="next" href="page2.html" />start,up,first,prev,next,last,... Bien utilisés par Mozilla, Opera, ...<link rel="glossary" href="page_glossaire.html" /><link rel="author" href="mailto:alex@france.fr" xml:lang="fr-FR" title="Alexandre Alapetite" />
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.
Quelques liens : (anglais)
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=https://alexandre.alapetite.fr" /><meta http-equiv="expires" content="Mon, 24 Nov 1980 09:20:00 GMT" />
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" /><meta name="generator" content="Notepad" /><meta name="geo.position" content="43.923;4.828" /><meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=23)" />
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">
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]](../../images/cc.gif "CC BY-SA (FR)"){kind=small}
