En-tête et Corps d'un document HTML.

Sommaire

Balises d'en-tête : <head>
- La balise de titre : <title>
- Les Balises Meta : <meta>
- chemin de base des URL : <base />
- relation entre documents <link />
- styles internes <style>
- masquage des scripts et CSS
La Balise de corps de document : <body>

Balises d'en-tête : <head> </head>

Cette balise située juste après le début d'un document html (et la balise <html>) permet de noter un certain nombre d'information qui (à l'exception du titre) n'apparaissent pas dans le document, mais servent à le définir et à lui donner quelques informations qui pourrons être utilisées par celui-ci, ou par des moteurs de recherche.

Les balises de titre, de méta-données, et les balises listées avant la balise de corps de document se situent toutes entre la balise d'ouverture <head> et celle de fermeture de l'entête </head> .

Les attribut de la balise <head>: profil="URL" : Chemin indiquant l'adresse des méta-données si elles ne sont pas situées dans le document.

Retour au sommaire

Balise <title> </title>

Cette balise permet de donner un titre à la page. Souvent se titre est inscrit dans la barre de titre du butineur utilisé. C'est souvent ce titre qui est aussi utilisé comme nom par défaut lorsque la page est ajouté dans les signets ou les favoris.

Le titre est compris entre les balises <title> et </title>

Cette balise n'a aucun attribut

Retour au sommaire

Balises <meta />

Cette balise qui peut être utilisée plusieurs fois permet de donner des informations complémentaires sur le document.

Les attributs des balises <meta /> :: http-equiv="..." : nom de l'entête réponse HTTP.; name="..." : nom de la méta-donnée définie dans l'attribut content.; content="..." : valeur de la méta-donnée ,nommée dans l'attribut name.; scheme="..." : donne la clé d'interprétation de la méta-donnée.

Exemple de balises meta:

<meta name="author" content="stephane chalamet" /> : Nom des auteurs d'un document. ici, l'auteur est stephane chalamet.
<meta name="generator" content="gnu-emacs" /> : Nom de l'outil ayant permit de créer la page web. Ici GNU Emacs.
<meta name="keywords" content="HTML, XHTML, code" /> : Mots clés du document (utilisé par certains moteur de recherche pour référencer leur documents). Ici, HTML, XHTML et code.
<meta http-equiv="Content-Script-Type" content="text/javascript" /> : Langage utilisé. Ici, Javascript. Permet de lever l'ambiguïté sur la manière d'interpréter le document par le butineur.

Retour au sommaire

chemin de base des URL : <base /> :

Cette balise permet de signaler au document que toutes les URL relatives du document ne partent pas du dossier en cours, mais, d'une position définie dans cette balise. Elle permet aussi de définir la zone d'affichage par défaut lorsque l'attribut target de la balise de lien n'est pas définie.

Attributs de la balise <base />

href="URL" : Définit la position relative par défaut d'un lien hypertexte.

target="..." : zone d'affichage par défaut lorsqu'un lien est utilisé, et que son attribut target n'est pas définit.

nom d'un cadre : La page ciblée par le lien s'affichera dans le cadre dont vous aurez donné le nom (si toutefois celui-ci existe).
_blank : La page ciblée par le lien s'affichera dans une nouvelle fenêtre.
_parent : La page s'affiche en occupant la place qu'occupe le cadre qui définit le cadre ou se trouve de la page actuelle.
_self : La page s'affichera dans la fenêtre ou le cadre ou se situe le lien.
_top : La page s'affichera dans la fenêtre ouverte actuellement en occupant toute la fenêtre (ceci fera disparaître les éventuels cadres de la fenêtre).

Retour au sommaire

relation entre documents : <link />

Cette balise permet de définir les relations existant entre ce document et d'autres documents.

Attributs des balises <link />

href="..." : URL de la ressource.

rel="..." : type de relation avec le document cité en ressource.

rev="..." : type de relation inverse avec le document cité en ressource.

type="..." : définit le type de contenu Internet.

media="..." : définit le support de destination

screen : visuel (écran).
print : impression.
projection : projection.
braille : en braille.
speech : audio (parlé).
all : tous.

target="..." : zone d'affichage par défaut lorsque le lien est utilisé

nom d'un cadre : La page ciblée par le lien s'affichera dans le cadre dont vous aurez donné le nom (si toutefois celui-ci existe).
_blank : La page ciblée par le lien s'affichera dans une nouvelle fenêtre.
_parent : La page s'affiche en occupant la place qu'occupe le cadre qui définit le cadre ou se trouve de la page actuelle.
_self : La page s'affichera dans la fenêtre ou le cadre ou se situe le lien.
_top : La page s'affichera dans la fenêtre ouverte actuellement en occupant toute la fenêtre (ceci fera disparaître les éventuels cadres de la fenêtre).

Exemple d'utilisation de la balise link pour expliquer la relation entre la page en cours, et la page située à l'adresse http://www.mon_site/monstyle :
<link rel="stylesheet" type="text/css" href="http://www.mon_site.com/monstyle" title="monstyle">
Ici, la relation indique que la page http://www.mon_site.com/monstyle est une relation relative aux feuilles de style utilisées.

Retour au sommaire

Styles internes <style> </style>

Cette balise sert à introduire une description de styles internes. Ces styles seront utilisés dans la page. La description des styles possibles et qui doivent être situés entre la balise <style> d'ouverture et la balise de fermeture </style> sont décrits dans la partie sur les feuilles de style en cascade.

Attributs des balises <style>

type="..." : définit le type de contenu Internet.

media="..." : définit le support de destination

screen : visuel (écran).
print : impression.
projection : projection.
braille : en braille.
speech : audio (parlé).
all : tous.

title=".." : donne un titre au style. Plusieurs styles peuvent être définis et ne seront utilisés que lorsqu'ils seront appelés avec l'attribut style d'une balise supportant cet attribut. Les balises supportant l'attribut style sont listées dans l'annexe sur les attributs communs.

Retour au sommaire

masquage de scripts et CSS

la balise de commentaire  est aussi utilisée pour encadrer les scripts et les feuilles de styles en cascade (CSS) interne et externe.
Cela permet de masquer ce contenu pour les butineurs n'interprétant pas les scripts et les CSS afin d'éviter des confusions, ou des effets indésirables. Les butineurs ne supportant pas l'utilisation de scripts ou de CSS n'interprètent pas les balises situées entre < > qu'ils ne reconnaissent pas, mais peuvent mal interpréter ce qui est situé entre ces balises en l'interprétant comme du texte mal balisé. Il est donc préférable de les mettre entre des balises de commentaire. Le butineur reconnaissant les balises de scripts et css savent reconnaître les scripts et descriptions de styles entre ces balises de commentaires.

Exemple:
<script>  </script>
<style>  </style>

Retour au sommaire

La Balise de corps de document : <body>

Outre le fait que cette balise introduit le corps du document, et qu'elle termine avec sa balise de fermeture le corps d'un document HTML, elle permet de définir l'aspect général du document, tel que la couleur du texte, la couleur des liens, et le fond du document.

Attributs des balises <body>: onload="..." : permet de nommer un script définit qui s'exécute au chargement de la page.; onunload="..." : permet de nommer un script définit qui s'exécute à la fermeture de la page.

Certains attributs sont déclassée en XHTML en faveur des feuilles de style:: bgcolor="couleur" : Permet de définir une couleur d'arrière plan.; background="couleur" : type de relation avec le document cité en ressource.; text="couleur" : couleur du texte.; link="couleur" : couleur des liens avant activation.; vlink="couleur" : couleur des liens lorsqu'ils sont activés.; alink="couleur" : couleur des liens déjà visités.

Attention, si vous utilisez une image d'arrière plan, pensez aussi à définir une couleur de fond qui permet de lire le texte si l'image d'arrière plan n'est pas lu par le butineur.
Cela permet notamment de permettre à l'utilisateur de lire le contenu de votre document même si vous utilisez une couleur de police blanche, et une image de fond sombre, alors que le butineur de l'utilisateur ne lis pas votre image de fond.

Retour au sommaire

1 juillet 2002
Stéphane Chalamet : stephane.chalamet@free.fr