Afficher l'en-tête d'un document web

L'élément head d'une page web n'est généralement pas affiché par les navigateurs web. Rien ne nous empêche cependant de modifier ce comportement par défaut.

Cet affichage est en effet bloqué par une simple règle CSS :

head {
    display: none;
}
Règle CSS appliquée par défaut par les navigateurs web.

Il nous suffit donc de la surcharger pour modifier le comportement de base :

head {
    display: block;
}
Règle CSS pour afficher l'élément head.

Mais que peut-il y avoir d'intéressant à afficher dans l'en-tête d'un document web ? Le titre de la page par exemple :

title {
    display: block;
    font-size: 2em;
    color: #fff;
}
Affichage de l'élément title.

On peut aussi s'amuser à afficher certains éléments link qui définissent des pages particulières du site, comme le flux RSS, la page d'accueil ou la page auteur.

link[rel="home"],
link[rel="author"],
link[type="application/rss+xml"] {
    display: block;
}
Affichage de certains éléments link.

Comme ces éléments n'ont pas de contenu, on peut choisir soit de générer un contenu dans un pseudo-élément (en reprenant l'attribut title par exemple), soit en affichant une icône d'illustration :

/** Affichage de l'attribut title de l'élément */
link[rel=author]:before { 
    content: attr(title); 
}
/** Affichage d'une image icône dans l'élément */
link[type="application/rss+xml"] {
    width: 20px;
    height: 20px;
    background: url(rss_icon.png) no-repeat 50% 50%;
}
Différentes façons de styliser les éléments link.

Vous pouvez voir une présentation particulière de l'en-tête sur la page courante. Ces petites astuces ont été testées avec Firefox 3.6, Opera 11.01 et Chromium 9.0. Les éléments link ne sont cliquables que sous Firefox (un click-droit sous Opera donne cependant accès aux commandes d'ouverture des liens).

RAGGETT, Dave ; LE, Hors ; JACOBS, Ian. Spécification HTML 4.01. W3C, . 7.4. L'en-tête du document

RAGGETT, Dave ; LE, Hors ; JACOBS, Ian. Spécification HTML 4.01. W3C, . 12.3. Les relations du documents : l'élément LINK