Le code de toute page web comprend 2 parties :
l'entête <head> et le corps <body>, toutes deux enserrées dans une balise <html> et précédée d'un Doctype,
de cette manière :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 [ couic ] <html> <head> </head> <body> </body> </html>
Chacun sait que le <body> contient tout le contenu visible à l'écran par l'internaute. Mais par contre, à qui et à quoi sert donc le <head> ?
Il est utilisé par divers logiciel, robot d'indexation des moteurs de recherche et navigateurs (avec alors parfois une amélioration de l'accessibilité). Chacun de ces éléments à un rôle particulier, évoqué ci-dessous.
En savoir plus :
Utilité : Navigateur
Lorsqu'Internet est né, un langage a été créé pour coder les pages web : le HTML.
Au fil des années de nouvelles versions de ce langage se sont enrichies de possibilités nouvelles. Résultat, il coexiste aujourd'hui diverses variantes de ce langage, par exemple, pour ne citer que les plus récentes : HTML 4.01 transitional, frameset et strict, XHTML 1.0 transitional, frameset et strict, etc.
Il est nécessaire d'indiquer au navigateur quelle version il va devoir interpréter.
Les 3 Doctypes HTML 4.1 (transitional, frameset et strict) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Un exemple de Doctypes XHTML 1.0 (strict) en contexte :
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> ...
Le Doctype xhtml est précédé d'un prologue XML (ici pour une page codée en ISO-8859-1). Cette déclaration est actuellement facultative. Noter aussi l'attribut xmlns de la balise html.
En savoir plus :
Après le Doctype (qui se trouvait avant la balise html) voyons le contenu du head.
Les balises rencontrées appartiennent à plusieurs familles :
<meta http-equiv="" <meta name="" <title> <link rel="" <link rel="Stylesheet" <style <script type="text/javascript"
Les meta http-equiv agissent sur le navigateur, tandis que les meta name sont principalement utilisées par les robots de moteur de recherche.
Les meta name ne sont pas standardisées, il en existe une grande variété, de plus ou moins utiles.
Le Dublin Core metadata est une tentative de standardisation des meta name.
En savoir plus :
Utilité : Navigateur
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
Schématiquement, les caractères peuvent être codés de plusieurs façons.
Les 128 caractères ASCII ne comprennent pas les caractère accentués ou autres caractères spéciaux (ç...). Pour coder l'alphabet d'Europe occidentale on emploie souvent le jeu de caractère (charset) ISO-8859-1 (ISO-Latin1). Les nombreuses langues s'écrivant dans des alphabets non latins ont leur propre charset. Les jeux de caractère unicode (UTF-8 ...) permettrons de coder tous les caractères de toutes les langues.
Faute d'indiquer le charset, la page sera affichée avec le charset par défaut du navigateur, qui est bien sur fonction du pays, aussi la page sera mal affichée hors des frontières.
La plupart des éditeurs web (des pays à alphabet latin) enregistrent en ISO-8859-1, souvent sans le dire ni sans moyen de changer.
Pour lire la page, le navigateur a besoin de connaître le charset.
Les navigateurs essaient de "deviner" le charset dans les premières lignes de code,
soit dans le prologue XML, si l'on est en xhtml,
soit dans notre meta http-equiv, que l'on doit placer de préférence en premier dans l'entête, juste avant la langue.
Cette tentative de lecture peut-être sujete à erreure :
Le charset est écrit dans la page, mais tel le dragon qui se mord la queue, le navigateur pour lire le charset dans la page a besoin... du charset.
Heureusement lorsque le serveur web envoi une page, il indique un charset dans une entête HTTP (non visible pour l'internaute).
On peut connaître le contenu de cette entête HTTP grâce à l'extension "Live HTTP Headers" pour Mozilla/Firefox (ou, à défaut : "Web Developer").
Souvent dans notre pays les serveurs indiquent ISO-8859-1 par défaut.
Mais il est bon de le spécifier expressément dans le fichier .htaccess.
En savoir plus :
Service en ligne :
Extension Firefox :
Utilité : Accessibilité ; Référencement
<meta http-equiv="content-language" content="fr-FR">
Utile aux navigateurs vocaux (et lecteurs d'écran). Possiblement utile à des moteurs de recherche. Google ne l'utilise pas.
Au code de la langue (fr) on peut ajouter celui du pays (FR).
En savoir plus :
Utilisé par : Navigateur
Quelques balises à éviter :
<meta http-equiv="refresh" content="8;url=nouveau.htm">
Après un délai, indiqué en secondes (ici 8), le navigateur appelle automatiquement le nouveau contenu de la page, ou bien une autre page. En ce dernier cas, avec la valeur 0 on va directement à la nouvelle page. L'url de redirection est ici indifféremment en absolue ou en relatif.
Utile si on a changé une page de place. Mais, si possible, il vaut alors mieux se servir du fichier .htaccess.
Refresh : une balise dont il ne faut pas abuser ! Certains moteurs de recherche pénaliseraient les sites employant cela (crainte de spamdexing).
En savoir plus :
<meta http-equiv="Expires" content="Sat, 22 jan 2005 07:30:00 GMT">
<meta http-equiv="Expires" content="0">
La page est périmée à partir d'une date ou bien elle est périmée de suite (0). Périmée, elle sera rechargée à la prochaine consultation.
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
Ces balises diversement implémentées dans les navigateurs tentent d'empêcher de conserver la page dans le "cache".
Utilité : Accessibilité ; Référencement
<title> </title>
Ce qu'il y a de plus important dans l'entête !!
Le "title" apparaît dans le bandeau au-dessus du navigateur, ainsi que dans l'historique des navigateurs. Il sert aussi comme titre par défaut pour la mise en favoris.
Les moteurs de recherche donnent un fort poids aux mots du titre. En outre, c'est ce titre qui apparaît en gros dans les résultats des moteurs de recherche.
Dans le standard du Dublin Core, le titre s'écrit ainsi (mais il est prématuré de l'écrire comme cela seulement) :
<meta name="DC.Title" content="Le titre ici">
En savoir plus :
Utilité : "Référencement"
<meta name="description" content="blabla">
La description est diversement utilisée par les moteurs de recherche, pour l'affichage dans les résultats dans certaines circonstances, ou pour les mots-clé contenus. Google ne l'utilise pas pour le positionnement de la page.
Utilité : Référencement
<meta name="keywords" content="mot1, mot2, ...">
Les mots-clé avaient un fort poids pour les moteurs de recherche.
Malheureusement cela a été mal utilisé : mots-clé illégitimes cachés aux yeux des internautes. Ceci pour obtenir malhonnêtement de meilleurs placements, perturbant la qualité des résultats des moteurs de recherche.
Aujourd'hui seuls de rares moteurs de recherche en tiennent encore compte. Les mots-clés utiles doivent donc être placés ailleurs : dans la page, le title, la description, l'URL ainsi que dans les textes cliquables pointant vers la page.
Il ne semble plus utile de garder cette meta keyword pour les rares moteurs qui l'utilisent encore puisque ceux-ci trouveront aussi bien les mots dans la page.
Notons que la balise est utilisée aussi par certains annuaires, qui remplissent automatiquement leurs "champs" avec les méta-données de la page.
Enfin, on peut rêver que le mot-clé retrouve son sens accadémique et soit à nouveau utilisé par une nouvelle génération de moteurs de recherche.
Ce que les mot-clé auraient dû être :
Utilité : "Référencement"
Par défaut les robots des moteurs de recherche indexent les pages et suivent les liens trouvés. Certains moteurs archivent les pages.
On peut demander aux robots de ne pas indexer (noindex), de ne pas suivre les liens de la page (nofollow) et de ne pas archiver (noarchive) (MSN accepterait nocache).
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noarchive">
Pour s'adresser à un seul moteur de recherche, remplacer "robots" par le nom de son robot :
Googlebot pour Google, msnbot pour MSN...
Il est conseillé de placer un fichier robots.txt dans le répertoire racine.
On peut demander à Google, et peut-être d'autres, de ne pas afficher d'extrait de la page (nosnippet). Elle n'est alors pas non plus disponible en cache.
<meta name="GOOGLEBOT" content="NOSNIPPET">
Pour demander au robot (MSN, Google et Yahoo) de ne pas utiliser le résumé et titre de l'Open Directory (mais plutôt la meta description ou un snippet) :
<meta name="robots" content="NOODP">
Pour demander (à Yahoo) de ne pas utiliser la description ni le titre de l'annuaire Yahoo :
<meta name="robots" content="noydir">
En savoir plus :
Utilité : "Référencement"
<meta name="revisit-after" content="4";
Est à comprendre comme un délais, en jours, avant toute nouvelle visite. (Pour éviter de surcharger le serveur.) Google ne l'utilise pas.
<meta name="author" content="Untel">
Bien d'autres meta name +/- apparentées existent...
<meta name="Reply-to" content="adresse@fai.fr">
Si vous aimez le spam...
Utilité : ??
Pour spécifier (sur la page d'accueil) l'URL principale du site.
<meta name="identifier-url" content="http://www.amaryllidaceae.org/">
Les adresses relatives, qui suivent cette balise dans la page, seront définies à partir de cette base.
Cette balise peut exister en plusieurs exemplaires, avec différentes valeurs, dans le head et aussi le body.
Exemple, si on place dans le début du body la balise ainsi rédigée :
<base href="http://www.amaryllidaceae.org/">
un lien Crinum/aquarium.htm venant ensuite va pointer vers
http://www.amaryllidaceae.org/Crinum/aquarium.htm (même si la page est en local sur le disque dur)
par contre le link vers la feuille de style ne sera pas concerné car placé avant la base, dans l'exemple.
Utile si un mécanisme de redirection fournit la page avec une mauvaise URL, par exemple si la page d'erreur 404 est fournie avec l'URL de la page absente.
Utilité : Accessibilité
<link rel="home" title="Accueil" href="../index.htm"> <link rel="prev" title="Titre page précédente" href="page1.htm"> <link rel="next" title="Titre page suivante" href="page3.htm"> <link rel="search" title="Recherche" href="recherche.htm"> <link rel="glossary" title="Glossaire" href="glossaire.htm">
Ce sont des aides supplémentaires à la navigation, utilisées par Mozilla (), Opera (Navigation > Navigation-Site), Lynx (affiché en haut de page)...
<link rel="alternate" lang="en" title="Home" href="index_en.htm">
Indique ici une version "alternative", traduite.
<link rel="canonical" href="URL-absolue-ou-relative">
En cas de page accessible par plusieurs adresses dans le même domaine (duplicate content), indique au moteur de recherche l'URL à prendre en compte. (Pour Google, Yahoo! et Live Search.)
<link rel="icon" type="image/png" href="chemin/mon-icone.png">
Indique l'icône de page web à utiliser, pour les favoris, etc.
En savoir plus :
Utilité : Navigateur
Pour utiliser un même style sur chaque page... Simple comme bonjour.
<link rel="Stylesheet" type="text/css" href="mon_style.css" media="screen,print">
En cas de feuilles de style (FdS) multiples : on doit distinguer 3 sortes de fonctionnement et d'écriture de link : permanente, "préférée" et alternative.
La FdS permanente est toujours appliquée. La préférée est appliquée par défaut. Une alternative est appliquée sur le choix de l'utilisateur et remplace alors la préférée.
La feuille de style permanente n'a pas de title. La préférée et les alternatives ont un title. Les alternatives ont... "alternate stylesheet" dans l'attribut rel.
| Feuille de style | rel= | title= | ||
| permanente | stylesheet | appliquées d'emblée. | - | |
| préférée | stylesheet | S'excluent mutuellement | oui | |
| alternative | alternate stylesheet | oui |
<link rel="Stylesheet" type="text/css" href="../style/general.css" media="all"> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print"> <link rel="stylesheet" type="text/css" title="Classique" href="../style/classic.css" media="screen"> <link rel="alternate stylesheet" type="text/css" title="Moderne" href="../style/altern.css" media="screen">
Les feuilles de style peuvent n'être appliquées qu'à l'écran ou qu'à l'impression... grâce aux valeurs données à l'attribut "media" : screen, print, aural / speech, projection, all...
Notez une particularité de Opera : en plein écran c'est média="projection" qui est appliqué.
Une feuille de style oubliant projection empêche un emploi correct de ce beau navigateur en plein écran.
Une particularité de NS4 : si on donne à média=
toute autre valeur que "screen" (par exemple "screen " "screen," "all")
alors la feuille de style n'est pas prise en compte.
La balise style, placé dans l'entête, ne s'applique qu'à la page en cours.
<style type="text/css" media="">
<!--
p{color:#006}
-->
</style>
Les écritures ci-dessus sont comprises même par d'anciens navigateurs tel NetScape 4.x. Cependant en indiquant "media="all" la css ne sera pas exploitée par NS 4.x.
Une autre manière de cacher une css à Netscape 4.x est d'employer @import :
<style type="text/css" media="">
<!--
@import url("default.css");
-->
</style>
Les commentaires évitent que les anciens navigateurs ne connaissant pas style n'affichent le contenu de cette balise à l'écran.
En Xhtml, on utilise <![CDATA[ et ]]>.
Une manière parmi d'autres :
<style type="text/css" media=""> <!-- /*<![CDATA[*/ /*]]>*/ --> </style>
En savoir plus :
Utilité : Navigateur
Même principe que pour les feuilles de style : on peut mettre le script dans la page
<script language="JavaScript" type="text/javascript"> <!-- //--> </script>
ou bien dans un fichier externe appelé par la balise script.
<script language="JavaScript" type="text/javascript" src="../style/styleswitcher.js"></script>
En Xhtml, pour un script dans la page, de même que pour la balise style,
on utilise <![CDATA[ et ]]>.
D'autre part l'attribut language="JavaScript" n'existe pas en XHTML.
<script type="text/javascript"> <!-- /*<![CDATA[*/ /*]]>*/ --> </script>