les langages du web:
structure et forme

3. La tête d'un document HTML

La tête d'un document HTML - tout ce qui se trouve à l'interieur (de la paire ouverture/fermeture) de la balise 'head' - en principe n'est pas visible dans un navigateur. Avec l'exception importante du contenu de l'élément 'title', qui est sensé d'être le titre du document (à ne pas confondre avec le titre du contenu du document, qui, s'il existe, bien entendu, se trouvera dans l'élément 'body' ...). Le contenu de l'élément 'title' est, en général, affiché dans la barre de votre (fenètre) navigateur. Par exemple, la tête de la page d'acceuil du forum Licence contient l'élément :

<title>Forum Licence :: Bobigny 2003-2004</title>

Et c'est ainsi que ce titre apparaît dans la barre du navigateur Mozilla (sur Macintosh) :

Exemple balise title

Il est important de bien utiliser la balise 'title', et de la toujours alimenter avec un contenu approprié, car c'est le contenu de cette balise qui, en général, sera affiché sur les pages résultats des moteurs de recherche comme Google. Si vous utilisez un outil graphique pour l'édition de vos pages, faites surtout très attention de toujours remplacer les titres par défaut donné par les logiciels. L'outil 'GoLive' de Adobe, par exemple, donne par défaut le titre 'Welcome to Adobe GoLive!' ; Frontpage (l'outil web de Microsoft) et Dreamweaver (de Macromedia) restent plus neutre, et vous proposent 'Untitled Document' ... Il suffit d'aller sur Google et chercher Welcome to Adobe GoLive ou Untitled Document pour voir l'impact de ces 'réglages par défaut' ...

Sauf l'élément 'title', on peut rencontrer plusieurs autres types d'éléments dans la partie 'head' d'un document HTML, les plus importants étants: 'base', 'meta', 'link', 'script' et 'style'.

On utilise un élément vide, base, pour spécifier un URI absolu qui agit comme URI de base pour la résolution des URI relatifs dans le document. Exemple :

<base href="http://www.harsmedia.com/Formation/">

On parle d'un 'élément vide' car il n'y a aucun 'vrai contenu' ; en HTML, un élément vide commence par le symbole <, suivi par le nom de l'élément et, en général, un ou plusieurs attributs. L'élément vide se termine par >. Il n'y a pas de balise fermante.

Aussi les éléments meta sont vides. On les utilise pour identifier les propriétés d'un document - comme un résumé du contenu, une liste de mots-clés, l'auteur, le langage, etc.) et assigner des valeurs à ces propriétés. Parmi ces propriétés est l'encodage de caractères utilisé. Dans l'élément 'meta' suivant le paramètre « charset » identifie l'encodage de caractères (une méthode pour convertir une séquence d'octets en une séquence de caractères) :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Pour pouvoir être validé, l'inclusion dans un document HTML de la déclaration de l'encodage de caractères utilisée est nécessaire.

Chaque élément meta spécifie un couple propriété / valeur. L'attribut 'name' (parfois : 'http-equiv') identifie la propriété, et l'attribut 'content' en spécifie la valeur. On les utilise pour controler une vaste collection de 'propriétés' du document :

  • Fournir une liste de mots de clés :
    <meta name="keywords" lang="fr" content="langages de balisage, html, web, internet, formation, meta, bobigny, licence pro">
  • Donner un résumé du contenu :
    <meta name="description" lang="fr" content="Notes de cours.">
  • Désigner l'auteur :
    <meta name="author" content="Harold Schellinx">
  • Permettre oui ou non aux robots d'accéder au document. Pour laisser la porte grande ouverte, mettez :
    <meta name="robots" content="all"> (Pour empecher les robots d'indexer une page et pour les interdire de suivre les liens qu'elle contienne, on donne la valeur 'NONE' à l'attribut 'content'.)
  • Pour desactiver la 'barre d'outils images', qui - par défaut :( - dans IE sous Windows apparaît si le curseur passe sur une image d'une page web, mettez :
    <meta http-equiv="imagetoolbar" content="false">
    MS imagetoolbar
  • ... et encore au moins une dizaine d'autres...

On utilise un autre élément vide, link, pour indiquer où sont placés divers documents et/ou fichiers qui ont une 'relation' (indiquée comme valeur de l'attribut 'rel') avec votre page. Les utilisations sont très diverses. Voici quelques exemples.

  • l'emplacement des feuilles de style CSS externes au document : <link rel="stylesheet" href="../styles/guide7.css" type="text/css" media="screen">
  • indication de l'emplacement des fichiers flux RSS du site :
    <link rel="alternate" href="feed/harsmedia.xml" type="application/rss+xml">
  • indication de l'emplacement du favicon (l'icône d'un site web, affiché avec l'URI dans la barre d'addresse du navigateur, ainsi que dans les listes des favoris et les onglets) :
    <link rel="icon" href="../../Pics/auto2.png" type="image/png">

Creative Commons | CC | 2003-2005 Paris, HarsMedia / H. Schellinx. HTML & CSS valide.