Une maîtrise des titres : utilisation et mise en forme

(1) Avant de rentrer en détail dans la magie des feuilles de style en cascade (CSS), nous devons tout d'abord savoir quels titres utiliser. Après tout, il y en a six parmi lesquels faire son choix : h1 à h6, respectivement du plus gros au plus petit, par conséquent du plus important au moins important. En règle générale, le h1 ne sera utilisé qu'une fois (c'est ce que je recommande) et il définira le site, le contenu de la page, ou les deux. Après le h1, le h2 sera utilisé pour identifier les sections principales de la page. Ainsi, le premier titre du contenu sera un h2, qui pourra alors être suivi par un autre h2, à moins qu'il n'y ait avant une sous-partie nécessitant son propre titre. Dans un tel cas, un h3 serait utilisé à la suite. Pensez parents, enfants, petits-enfants, et ainsi de suite, comme l'imposera l'organisation du contenu.

Voici un exemple de structure possible.

<h1> Animaux.com - chiens
    <h2> A propos des chiens
        <h3> Caractéristiques physiques
            <h4> Petits chiens
            <h4> Grands chiens
        <h3> Dresser des chiens
            <h4> Traits de caractère
 
    <h2> Navigation et liens
        <h3> Partenaires
            <h4> Amis
        <h3> Sponsors

Notez que je n'ai pas utilisé les sous-titres h5 et h6. Je ne les ai pas mis parce que je trouve que j'en ai rarement besoin. Mais tout dépend de votre document web et de son contenu. Si ça a un sens de les utiliser, alors faites-le, mais ne sautez pas de taille. En d'autres termes, ne faites pas suivre un titre h2 par un h4. Un h3 devrait d'abord être nécessaire.

Prenez le temps de bien le faire. Les titres ne sont pas seulement importants pour l'organisation de la page et son indexation (par les moteurs de recherche), ils sont également extrêmement importants pour l'accessibilité du web. Certains utilisateurs seront capables de déterminer la sémantique d'une page à partir de la structure des titres, avant d'accéder au contenu lui-même. Certaines personnes seront en mesure d'utiliser vos titres pour naviguer dans la page courante.

Bien, maintenant que la voie est libre, passons au vif du sujet.

Gros, noirs et laids ?! C'est tellement loin de la vérité. Les titres sont facilement mis en forme et plutôt coopératifs en offrant une cohérence de support décente multi-plateforme / multi-navigateur. Regardons ça plus en détail. Dans les exemples qui suivent je proposerai des textes avec des titres, tous h4 parce que c'est approprié à ce cas, chacun traité différemment. Chaque exemple sera suivi par les styles utilisés pour un rendu correct sur ce site. Cela peut quand même toujours s'avérer utile. Merci de noter que du fait des différentes polices proposées sur ce site, il peut y avoir quelques divergences de rendu. Les styles en-ligne ont été utilisés pour les exemples dans cet article.

Celui-ci est assez sympa. Il peut aussi flotter à gauche. Tout dépend de ce que vous recherchez. Pour le faire flotter à gauche, la marge doit être ajustée, en intervertissant les dimensions gauche et droite. Ça peut faire sympa avec un fond coloré ou une image. Une image de fond peut être positionnée au coin supérieur droit et un espacement ajouté à droite du titre pour faire de la place à l'image.

Voir l'exemple en ligne.

h4 
{
    float : right;
    margin : 0 0 10px 30px; /* haut, droite, bas, gauche (respectivement) */
    color : #cc6633;
    font : 150% georgia, palatino, serif;
    font-style : italic;
}

Une couleur de fond (admirez ce contraste), une bordure, et un léger espacement : voila tout ce qui est nécessaire pour l'obtenir. C'est un style idéal si vous voulez une forte démarcation visuelle de section. Un tel traitement convient probablement mieux à des titres supérieurs h1 ou h2. Il peut être utilisé avec créativité sur une barre latérale tout aussi facilement. Il peut très bien rendre avec uniquement une bordure, ou en ajoutant une image de fond.

h4 
{
    background-color : #f7f7f7;
    border : 1px solid #339999;
    color : #cc6633;
    padding : 3px 8px; /* haut/bas, droite/gauche (respectivement) */
    width : 98.5%;
    margin-top : 25px;
}

Voir l'exemple en ligne.

Vous avez normalement vu ce type de traitement dans un livre, pas sur le web. Mais il n'y a pas de raison de ne pas l'utiliser. Ça pourrait être particulièrement utile si vous vous occupiez de nombreux titres et que vous vouliez garder de la place. Cet effet est aussi disponible à travers la propriété display : run-in, qui a été créée spécifiquement pour ce cas de figure (sans imbrication impropre comme cela serait nécessaire si la propriété display : inline était utilisée). Malheureusement, display:run-in n'est pas bien supportée, pas même sous Firefox, donc, pour le moment, ceci est probablement la meilleure solution. Sinon, si une présentation au pixel près n'est pas cruciale, on peut opter pour une amélioration progressive permettant un rendu correct pour les navigateurs qui le supportent (Opera et Safari) et un rendu normal du titre pour ceux qui ne le supportent pas. Si vous utilisez des styles spécifiques par navigateur, alors vous pouvez étendre le niveau de support en proposant les deux méthodes.

h4
{
    float : left;
    margin : 0;
    padding : 5px 5px 0 0; /* haut, droite, bas, gauche (respectivement) */
    color : #cc6633;
    font-size : 100%;
}

Voir l'exemple en ligne.

Je pense que ça semble plutôt sophistiqué, mais cela dépend fortement du type de police utilisé. Une police avec empattement pourrait bien rendre mais j'ai décidé de laisser votre choix de police prévaloir. Ça pourrait être un sujet d'expérimentation.

h4 
{
    color : #cc6633;
    font-variant : small-caps;
    letter-spacing : 0.5em;
    font-size : 120%;
}

Voir l'exemple en ligne.

Convertissez-le en majuscules, vérifiez que c'est en gras, essayez de choisir une police grasse comme Impact/Futura comme j'ai utilisé ici, et étendez-le un peu. Blam. Ce traitement en fait une affirmation.

h4 
{
    color : #cc6633;
    font : 150% impact, futura, sans-serif;
    text-transform : uppercase;
    letter-spacing : 0.3em;
    text-align : center;
}

Voir l'exemple en ligne.

Utiliser des images de fond avec les titres offre presque des possibilités illimitées. Cet exemple est simplement l'une des myriades de possibilités. De plus petites images peuvent être répétées, ou vous pouvez être créatifs d'autres manières comme montré dans l'exemple qui suit.

h4 
{
    background : url(headings-background.jpg) no-repeat;
    color : #cc6633;
    padding: 8px 0 18px 15px; /* top, right, bottom, left (respective) */
    margin : 25px 2px 0 2px; /* top, right, bottom, left (respective) */
}

Voir l'exemple en ligne.

Voilà un effet sympa créé par khmerang.com qui utilise une balise span vide comme contenant positionné de façon absolue pour un arrière plan répété au dessus du texte auquel il s'applique, l'accessible méthode Gilder/Levin de remplacement d'image. Les tâches de couleur écaillent quelques pixels de texte provoquant cet effet. Le balisage ressemble à ça : <h4><span></span>Texte</h4>.

h4 
{
    color : #cc6633;
    font : 200% impact, futura, sans-serif;
    text-transform : uppercase;
    float : left;
    overflow : hidden;
    position : relative;
    padding-left : 3px;
}
 
h4 span 
{
    background : url(headings-worn.gif);
    position : absolute;
    width : 100%;
    height : 2em;
}
 
p 
{
    clear : left;
}

Voir l'exemple en ligne.

Il ne s'agrandira pas comme les autres exemples de titre-image, mais c'est toujours une méthode viable pour mettre un titre sur une page. Et c'est toujours une méthode accessible. La mise en forme est extrêmement simple donc elle est directement suivie par le balisage.

h4 
{
    color : #cc6633;
    text-align : center;
}
 
h4 img 
{
    border : 0;
}

<h4>
    <img src="headings-embedded.jpg" width="400" height="50" alt="Un titre avec image embarquée" />
</h4>

Voir l'exemple en ligne.

Les exemples ci-dessus ne sont que la proverbiale partie émergée de l'iceberg. Armé d'une feuille de style, de quelques images, et d'imagination, vous pouvez offrir le meilleur des mondes : accessibilité, lisibilité, organisation, et design, tout en offrant une page sémantique. Que vouloir de plus ?

Les titres sont-ils gros, noirs et laids ? Plus du tout.

Tous mes remerciements à LedZeppII pour sa relecture.