Une maîtrise des titres : utilisation et mise en forme
Date de publication : 26/11/2008
Par
Mike Cherim (Accesites.org)
Traduit par Sylvain Jorge Do Marco
Titres, je vous maîtrise. Ne me défiez pas, je suis le tout
puissant développeur web. Je suis votre maître car je brandis
une feuille de style avec laquelle je peux vous faire miens...
Wouaou ! D'où ça vient ? Ça semble tellement théâtral. Et, pourtant,
ça définit si bien notre relation avec les éléments titre. Bien sûr
tout le monde ne le ressent pas de cette façon. Pour ma part, je me
souviens d'un temps où les titres étaient quelque chose que j'évitais
d'utiliser. Je veux dire, franchement, ils sont si gros, si noirs et
si laids. C'était au tout début de mon incursion dans le métier, aussi,
quand les paragraphes, ou pseudo paragraphes comme j'aime les
appeler maintenant, étaient créés en plaçant deux éléments de saut de
ligne entre deux blocs de texte. Je ne savais pas faire mieux. Je ne
me rendais pas compte du pouvoir que j'avais entre les mains avec ma feuille
de style. J'ai appris.
Choisir les titres
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.
Mettre en forme les titres
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.
h4
{
float : right;
margin : 0 0 10px 30px;
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;
width : 98.5%;
margin-top : 25px;
}
|
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;
color : #cc6633;
font-size : 100%;
}
|
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%;
}
|
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;
}
|
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;
margin : 25px 2px 0 2px;
}
|
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;
}
|
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>
|
Devenir un chef
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.
Remerciements
Tous mes remerciements à
LedZeppII
pour sa relecture.
| (1) |
Cet article a été publié à l'origine, le 16 Février 2008, en version anglaise
et est visible à l'adresse suivante :
A Command of Headings: Usage and Styling
|
| (2) |
NdT : La gestion des articles sur le site developpez.com ne permettant
pas une présentation personnalisée des titres, des images sont utilisées
pour donner une idée du rendu obtenu. Pour voir ces titres mis en forme
en situation réelle, merci de vous reporter soit aux exemples soit à
l'article original.
|
Copyright © 26/11/2008 Mike Cherim. Aucune reproduction, même partielle, ne peut être faite
de ce site et de l'ensemble de son contenu : textes, documents, images, etc
sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E
de dommages et intérêts.
Cette page est déposée à la
SACD.
