Le contenu de vos en-têtes vous semble peu important sous prétexte que mis à part un titre, il est invisible pour vos visiteurs ? Et pourtant, c'est grâce à eux que les moteurs de recherche référenceront votre site et que le public viendra vous rendre visite... Des amis indispensables, donc, mais trop souvent négligés !
3.1.1 Un titre pour votre page :
L'en-tête d'une page Web, c'est l'ensemble des données qui se trouvent entre les balises <HEAD> et </HEAD> du code HTML. Le rôle de ces données est de fournir aux navigateurs et autres moteurs de recherche des informations sur la page en question. Les informations contenues dans l'en-tête d'une page sont le titre, les balises <META> et les déclarations de script ou de style.
Lorsque aucun titre n'est précisé pour une page, les navigateurs ou les agents indiquent le nom du fichier. Le problème, c'est qu'une page intitulée page1.html, ce n'est pas très accrocheur.
La solution, simplissime, c'est de placer un titre entre les balises dans l'en-tête de votre page :
<TITLE> le titre de ma page </TITLE>
Pour le choix du titre, soyez le plus précis et le plus concis possible. Evitez d'avoir plusieurs pages avec le même titre, quitte à numéroter vos pages et vos titres. En effet, ce titre est la première chose que voit un visiteur tombant sur votre site dans un moteur de recherche. Il faut donc lui donner envie d'y entrer.
Mauvais titre : <TITLE> le titre de ma page </TITLE>
Bon titre : <TITLE> la fantastique page de wolfman!!! </TITLE>
3.1.2 Les balises META pour moteurs de recherche :
Il existe deux types de balises <META>
Vous devez présenter les balises destinées aux moteurs de recherche de la façon suivante :
<META NAME="author" CONTENT="Wolfman">
<META NAME="description" CONTENT="Page d'accueil du site de Wolfman">
<META NAME="keywords" CONTENT="html, frames, boutons">
L'attribut NAME peut donc avoir trois valeurs :
Pour chacune de ces valeurs, les agents vont stocker le contenu de l'attribut CONTENT. Il convient donc de renseigner correctement ces attributs.
Un utilisateur qui a saisi un de vos mots clés dans un moteur de recherche va voir le titre et la description de votre page apparaître dans une liste répertoriant d'autres pages correspondant à sa recherche.
3.1.3 Les balises META pour serveurs :
Les balises <META> de type HTTP-EQUIV donnent des informations au serveur Web. Ces informations sont très spécifiques et directement liées au protocole HTTP.
CONSEIL : Ne pas confondre HTTP et HTML.
Le premier est le protocole de transfert de pages Web et des objets associés sur le Net, le second est le langage de description de ces pages.
Exemple :
<META HTTP-EQUIV="refresh" CONTENT="3,http://wolfman.est-ici.org/">
Comme pour les balises destinées aux agents, le serveur Web associe la commande passée à l'attribut HTTP-EQUIV à la valeur de l'attribut CONTENT. Ici, nous indiquons au serveur Web qu'il doit envoyer une nouvelle page (http://wolfman.est-ici.org/) au client, trois secondes après avoir chargé la page contenant cette balise.
Rafraîchissement pour webcam !
La balise <META HTTP-EQUIV="refresh"...> peut servir à rafraîchir une page automatiquement... par exemple pour afficher l'image d'une webcam !
Styles
Les styles sont une spécification liée au HTML 4. Ils permettent de définir une mise en forme évoluée en quelques lignes.
Exemple de déclaration d'un style :
<HEAD>
<TITLE>un autre exemple </TITLE>
<META NAME="author" CONTENT="Wolfman">
<STYLE>
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
3.1.4 Quoi d'autre dans l'en-tête ?
Tout ce qui n'apparaît pas directement dans le navigateur peut être contenu dans l'en-tête de page, notamment les scripts (JavaScript ou autres) et les déclarations de styles.
Scripts
Les scripts placés dans l'en-tête de la page sont principalement des implémentations de fonctions et des chargements de fichiers externes. On utilise pour cela la balise <SCRIPT>
L'appel à ces différentes fonctions sera effectué dans le corps de la page (c'est-à-dire entre les balises <BODY> et </BODY>)
Exemple d'en-tête contenant le chargement d'un JavaScript à partir d'un fichier :
<HEAD>
<TITLE> une page d'exemple sur les javascript </TITLE>
<META NAME="author" CONTENT="Wolfman">
<SCRIPT LANGUAGE="JavaScript" SRC="scripts/monscript.js">
</SCRIPT>
</HEAD>
3.1.5 Toutes les balises d'en-tête :
Voici un tableau récapitulatif des balises d'en-tête du HTML :
|
<HEAD> </HEAD>
|
Définit l'en-tête de la page
|
|
<TITLE> </TITLE>
|
Définit le titre de la page
|
|
META
|
Balise de description
|
|
NAME
|
destinée aux moteurs de recherche
|
|
HTTP-EQUIV
|
destinée aux serveurs
|
|
CONTENT
|
Contenu de la balise de description
|
|
<SCRIPT> </SCRIPT>
|
Programme en langage script
|
|
<STYLE> </STYLE>
|
Définition de style
|
 |
 |