Apprends à organiser du contenu en listes non ordonnées, listes ordonnées et listes de descriptions en utilisant les éléments HTML appropriés.
Quand tu as une collection d'éléments où l'ordre n'a pas d'importance, utilise une liste non ordonnée. En HTML, elle est créée avec l'élément <ul>, et chaque élément à l'intérieur est enveloppé dans un élément <li> (list item).
Les navigateurs affichent généralement les listes non ordonnées avec des puces par défaut.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>Les listes non ordonnées sont parfaites pour les menus de navigation, les listes de fonctionnalités, les listes d'ingrédients, ou tout groupe d'éléments qui n'ont pas de séquence particulière.
Quand la séquence des éléments est importante — comme des instructions étape par étape, des classements, ou la procédure d'une recette — utilise une liste ordonnée avec l'élément <ol>. Chaque élément est toujours enveloppé dans <li>.
Les navigateurs numérotent automatiquement les éléments des listes ordonnées à partir de 1.
<ol>
<li>Preheat the oven to 180 degrees.</li>
<li>Mix the dry ingredients together.</li>
<li>Add the wet ingredients and stir.</li>
<li>Pour into a baking pan and bake for 30 minutes.</li>
</ol>Tu peux changer le numéro de départ avec l'attribut start (<ol start="5">) ou inverser l'ordre avec l'attribut reversed. L'attribut type te permet de changer entre différents styles de numérotation : 1 (par défaut), a, A, i, ou I.
<!-- You can nest lists inside other lists -->
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<!-- You can also mix list types -->
<ol>
<li>First step
<ul>
<li>Sub-point A</li>
<li>Sub-point B</li>
</ul>
</li>
<li>Second step</li>
</ol>HTML fournit également des listes de descriptions pour les paires terme-définition. Une liste de descriptions utilise trois éléments :
<dl> — le conteneur de la liste de descriptions<dt> — le terme qui est décrit<dd> — la description ou définition du terme<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML content.</dd>
</dl>Les listes de descriptions sont idéales pour les glossaires, les affichages de métadonnées (comme montrer un auteur et une date), et les sections FAQ. Un seul <dt> peut avoir plusieurs éléments <dd> si le terme a plus d'une définition.
Quel type de liste dois-tu utiliser pour des instructions étape par étape ?