Afficher un sommaire, énumérer les éléments d’une recette, hiérarchiser les étapes d’un processus : les listes seront bien utiles pour mettre en forme le texte.
Plusieurs listes peuvent coexister et s’imbriquer entre elles, créant automatiquement les retraits nécessaires.
Les listes sont très utilisées pour la rédaction de contenus sur le Web, car elles sont particulièrement adaptées à un style court, concret et concis.
Les listes ordonnées
Pour créer une liste ordonnée simple, on utilise les balises <ol> et </ol> au début et à la fin, et les balises <li> et </li> au début et à la fin de chaque élément de la liste.
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>
Liste ordonnée simple
On peut également imbriquer différentes listes ordonnées entre elles, afin de spécifier plusieurs niveaux. Les valeurs de l’attribut <type> placées dans la balise <ol> permettent de spécifier le type de liste souhaité.
Si l’attribut n’est pas spécifié, la liste par défaut est une séquence de nombres arabes.
| Description | Attribut |
|---|---|
| Séquence de lettres majuscules | type=“A” |
| Séquence de lettres minuscules | type=“a” |
| Séquence de chiffres romains majuscules | type=“I” |
| Séquence de chiffres romains minuscules | type=“i” |
| Séquence de nombres arabes | type=“1” |
<ol type="I">
<li>Construction
<ol>
<li>Gros œuvre</li>
<li>Finitions</li>
</ol>
</li>
<li>Inauguration
<ol>
<li>Première visite</li>
<li>Personnalités présentes</li>
</ol>
</li>
</ol>
Listes imbriquées
Si on ne souhaite pas commencer la numérotation de la liste par A, a, I, i ou 1, on doit utiliser le paramètre start à l’intérieur de la balise <ol> :
<ol start=“3” type=“I”>
Le premier élément de la liste sera numéroté ici avec la lettre C.
Les listes non ordonnées
Ce ne sera plus la balise <ol> mais la balise <ul> qu’il faudra utiliser.
Si on ne spécifie aucun attribut, la liste par défaut est constituée de puces pleines.
<p>Ingrédients :</p>
<ul>
<li>125 g de chocolat</li>
<li>50 g de beurre</li>
<li>50 g de sucre</li>
<li>3 œufs</li>
</ul>
Liste de puces pleines
L’attribut <type> de la balise <ul> permet de spécifier trois types de puces :
| Description | Attribut |
|---|---|
| Puce pleine | type=“disc” |
| Puce évidée | type=“circle” |
| Carré | type=“square” |
<p>Ma liste de courses :</p>
<ul>
<li>Chocolat noir</li>
<li>Sucre
<ul type="circle">
<li>150 g de sucre glace</li>
<li>200 g de sucre en morceaux</li>
<li>200 g de sucre en poudre</li>
</ul>
</li>
<li>3 oeufs</li>
</ul>
Listes imbriquées
On peut utiliser la balise <ul> seule (sans les balises <li>) pour mettre un texte en retrait sans qu’une puce apparaisse.
<p>La ville de Toulouse</p>
<ul>Elle est située dans le Sud-Ouest
de la France.</ul>
Retrait sans puce
Les listes de définition
Ce type de liste (peu connu) permet de formater automatiquement le mot à définir et sa définition.
La balise <dl> (definition list) introduit la liste, et la balise <dt> (definition term) permet de mettre en avant le terme que l’on définit, tandis que la balise <dd> (definition description) introduit la définition.
Les balises <dt> et <dd> sont orphelines.
<dl>
<dt>LES LISTES ORDONNÉES
<dd>Elles sont créées à l'aide des balises *ol* et *li*.
<dt>LES LISTES NON ORDONNÉES
<dd>Elles sont créées à l'aide des balises *ul* et *li*.
<dt>LES LISTES DE DÉFINITION
<dd>Elles sont créées à l'aide des balises *dl*, *dt*
et *dd*.
</dl>
Liste de définitions :
les signes < et > ont été remplacés par des astérisques
car ils auraient été interprétés comme des balises de listes
et auraient perturbé l’affichage.
Dans le prochain article, il sera question des liens.