Le code html intègre des balises prédéfinies de hiérarchisation du texte.
Les balises hiérarchiques
elles sont pour une part aussi des balises de mise en forme.
Voici la liste de la plus grande à la plus petite :
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Résultat :
Titre 1
Titre 2
Titre 4
Titre 5
Titre 6
Si l’on respecte la fonction initiale de ces balises, chacune d’elles visent à déterminer le niveau hiérarchique d’un titre dans la page. H1 sera utilisé pour un titre de premier niveau (police la plus grande ), h2 pour un titre de deuxième niveau (police de taille inférieure), h3 pour un titre de troisième niveau (taille de police encore inférieure) ; etc.
Le titre que l’on veut ainsi hiérarchiser est bien entendu à placer entre la balise ouvrante et la balise fermante.
Si l’on peut classer ces balises parmi les balises de structuration de la page, c’est parce que ce sont des balises « block » donc elles génèrent automatiquement un passage à la ligne. De plus, leur affichage par défaut est le plus souvent interprété par les navigateurs comme un affichage centré, c’est-à-dire au milieu de la largeur de la page.
Les listes
Il existe différents types de listes :
Les listes dites descriptives
Les listes dites non ordonnées
Les listes dites ordonnées.
1. Les listes descriptives
Voici l’écriture de base d’une telle liste dont le titre serait « Lexique »
<h4>Lexique</h4>
<dl>
<dt>Premier terme du lexique</dt>
<dd>la définition du terme</dd>
<dt>Deuxième terme du lexique</dt>
<dd>la définition du terme</dd>
</dl>
Résultat :
Lexique
- Premier terme du lexique
- la définition du terme
- Deuxième terme du lexique
- la définition du terme
Ce type de liste permet une hiérarchisation des informations grâce à la propriété block par défaut de ses balises et par le jeu de retrait (ou d’indentation).
2. Les listes non ordonnées également appelées listes à puce.
Voici l’écriture de base d’une telle liste dont l’objet serait ici de faire la liste des mots attachés au lexique.
<h4>Tous les mots du lexique</h4>
<ul>
<li>Premier terme</li>
<li>Deuxième terme</li>
<li>Troisieme terme</li>
</ul>
Si vous testez ce code sous la forme :
Tous les mots du lexique
- Premier terme
- Deuxième terme
- Troisieme terme
Vous remarquerez que le style par défaut de la puce (petit symbole) située devant le texte varie selon les navigateurs. Sous firefox par exemple, il s’agira d’un losange, sous opera, il s’agira d’un rond, de même que sous internet explorer. Nous verrons ultérieurement comment changer le style de ces puces et de la liste elle-même.
3. les listes ordonnées appelées également numérotées.
Voici la syntaxe de base d’une telle liste, par exemple ici une liste classant les mots du plus important au moins important :
<h4>Les termes à connaître en priorité</h4>
<ol>
<li>Premier terme</li>
<li>Deuxième terme</li>
<li>Troisième terme</li>
</ol>
Résultat :
Les termes à connaître en priorité
- Premier terme
- Deuxième terme
- Troisième terme
Vous noterez cette fois que chaque élément de la liste est précédé d’un numéro indiquant son rang dans la liste.
Nous verrons dans un autre article les balises de structuration simple (non hiérarchique) du contenu.
