Le langage HTML/L'en-tête

L'en-tête est la partie du fichier HTML comprise entre les balises <head>…</head>. Cette partie est située juste après le doctype et la balise d'ouverture <html>.

L'en-tête contient des informations sur la page elle-même (« méta-données ») : titre, auteur, description du contenu de la page, mots-clefs, où feuille(s) de style à utiliser…

La structure de l'en-tête est décrite dans le RFC 2616[1].


Note
Nous utilisons ici le HTML5. Pour le XHTML, rajoutez simplement les barres de fraction à la fin des balises isolées, par exemple
XHTML <meta name="propriété" content="attributs" />
HTML5 <meta name="propriété" content="attributs">

Principaux éléments

modifier
Titre
Le titre est compris entre les balises <title>…</title>.
Habituellement, le titre de la page est affiché dans la barre de titre du navigateur (tout en haut), et lorsque le navigateur gère les onglets, dans l'étiquette des onglets.
Cet élément est obligatoire.
Encodage
Si le fichier contient des caractères répondant à la norme ISO-8859-1 « Latin-1 », on mettra la balise
<meta charset="utf-8">

Cette information est très fortement recommandée.

Auteur
Le nom de l'auteur est indiqué avec la balise suivante :
<meta name = "author"
   content = "nom de l'auteur" >
Description de la page
La description du contenu de la page est indiquée avec la balise suivante :
<meta name = "description"
   content = "phrase de description" >
Mots-clefs
Les mots-clefs servent à référencer la page. Cependant, de nombreux moteurs de recherche n'ont plus recours aux mots-clefs car des auteurs utilisaient des mots-clefs sans rapport avec le contenu afin d'augmenter la fréquentation de leur page (cas notamment de nombreux sites pornographiques). Les mots-clefs sont indiqués avec la balise suivante :
<meta name = "keywords"
   content = "liste de mots-clefs" >
Robots
Le robot sert à gérer le référencement de la page. Il prend comme argument follow (permet au robot de suivre les liens de la page), index (permet au robot d'indexer la page), les arguments nofollow et noindex sont les contraires (ne pas suivre et ne pas indexer). Les deux derniers arguments sont all et none qui, comme leur noms l'indique, active ou désactive les deux fonctions. Les instructions pour robots sont indiquées avec la balise suivante :
<meta name = "robots"
    content = "all|(no)follow|(no)index|none" >
Feuille de style
Lorsque la page utilise une feuille de style située dans un autre fichier, on utilise la balise
<link rel= "stylesheet"
   type = "text/css"
   href="nom_du_fichier.css">
On peut aussi écrire la feuille de style (code CSS) directement dans l'en-tête, entre les balises <style type="text/css">…</style>.

 

L'attribut "rel" n'est accepté que dans les balises "a", "area", et "link", et avec des valeurs prédéfinies[2].

Voir aussi Le langage CSS/Interface HTML.

Balise <meta>

modifier

La balise <meta> a été utilisée plusieurs fois ci-dessus. Vous avez remarqué que sa syntaxe générale était :

<meta name="propriété" content="attributs" >

En plus d'indiquer des méta-informations sur la page, elle permet de faire un rafraîchissement automatique de la page, et d'utiliser des fonctionnalités spécifiques à certains navigateurs (exemple : des effets visuels de transitions entre les pages).

  1. (anglais) Request for comments no 2616.
  2. https://www.alsacreations.com/article/lire/1400-attribut-rel-relations.html