Titres et sous titres
Structurer un texte avec les titres
Lorsque vos pages XHTML contiennent beaucoup de textes, vous chercherez à bien les structurer afin de bien aiguiller le visiteur. Pour avoir une idée sur le contenu général de la page, on peut déjà lui donner un titre en utilisant la balise <TITLE>
Code XHTML :
<title>Grand titre de la page</title>
Le contenu de cette balise s'affiche tout en haut de la page, sur le navigateur. Mais les titres en XHTML peuvent aussi servir pour avoir une fonctionnalité similaire aux tables de matière dans les logiciels de traitement de texte comme Microsoft Word.
De la même manière que dans les journaux et les livres, on peut décrire le contenu du document à travers les titres et lui donner ainsi une structure logique. Il s'agit ici de mettre des titres, des sous titres. Comment faire ?
Entête à plusieurs niveaux
On veut structurer les titres en plusieurs niveaux comme suit :
Code XHTML :
1. Grand titre 1 o 1.1 -Sous titre1 o 1 .1 . 1 -Section 1 o 1 .1 . 2-Section 2 1.2 -Sous titre1 o 1 .2 . 1 -Section 1 o 1 .2 . 2-.Section 1 2. Grand titre2 o 2.1 -Sous titre1 o 2 .1 . 1 -Section 1 o 2 .1 . 2-Section 2 2.2 -Sous titre1 o 2 .2 . 1 -Section 1 o 2 .2 . 2-.Section 1
Pour ce faire, on peut spécifier 6 niveaux de titres, en numérotant la balise< h>. On a <h1><h2> jusqu'à h6. h1 permet donc de spécifier le grand titre, h2 le sous titre en bas de h1, et ainsi de suite. Afin de voir plus clair, illustrons tout cela à l'aide d'un exemple. Prenons la structure de notre tutoriel comme exemple.
Exemple sur les titres :
Code XHTML :
<title>Plan du tutoriel</title> <h1>1.XHTML</h1> <h2>1.1-Les titres</h2> <h3>1.1.2-Intérêt des titres</h3> <h3>1.1.3-Entête à plusieurs niveaux</h3> <h3>1.1.4-Les erreurs à éviter</h3> <h2>1.2-Les paragraphes</h2> <h2>1.3-Mettre en valeur des textes</h2> <h2>....</h2> <h1>2.CSS</h1>
Les erreurs à éviter
Comme nous venons de voir ci-dessus, les niveaux des entêtes sont ordonnancés de façon logique. Notez bien que les balises se mettent les unes à la suite des autres : En dessous de h1, on a h2 puis h3 en dessous etc. Logiquement on peut sauter de h4 à h2 sans passer par h3. Par contre, pour aller de h2 à h4, on doit passer par h3 par respect de la structure.
Exemple : Respect de la logique
Code XHTML :
<body> <h1>1.XHTML</h1> <h2>1.1-Les titres</h2> <h3>1.1.2-Intérêt des titres</h3> <h3>1.1.3-Entête à plusieurs niveaux</h3> <h3>1.1.4-Les erreurs à éviter</h3> <h4>a-Première erreur à éviter</h4> <h4>b-Deuxième erreur à éviter</h4> <h4>c-Troisième erreur à éviter</h4> <h2>1.2-Les paragraphes</h2> <h2>1.3-Mettre en valeur des textes</h2> <h2>....</h2> <h1>2.CSS</h1> </body>
Une autre erreur à éviter c'est aussi d'utiliser un h4 au lieu d'un h2 à un endroit, juste pour avoir un titre plus petit. Le mieux dans ce cas c'est d'utiliser les CSS si on veut réduire la taille de la police afin de ne pas briser la suite logique des balises.
Notons qu'en XHTML, on donne surtout une importance aux contenus. Pour ce qui est de la forme, il y a le CSS. Les titres permettent non seulement de donner un accès plus simple au contenu du document mais aussi à séparer les paragraphes dont on va parler dans la suite de cette section.
