Listes en HTML

Les listes ordonnées ou non-ordonnées sont des éléments structuraux essentiels pour présentation du contenu d’un page HTML.

Les listes sont des éléments essentiels dans la structure des pages HTML en particulier les listes non-ordonnées qui sont utilisées à des endroits qui peuvent parfois surprendre les débutants. Par exemple, la plupart du temps, les menus de navigation sont construits avec des listes. Les listes permettent de gérer la hiérarchie des éléments, l’affichage est ensuite complétement retravaillé en CSS.

Les listes non-ordonnées versus ordonnées

Les listes non-ordonnées, comme leur nom l’indique, n’ont pas de notion d’ordre. Elles se présentent par défaut sous la forme d’une liste à puces comme vous pouvez en trouver dans les logiciels de traitement de texte.

Les listes ordonnées quant à elles concernent des éléments qui doivent être lus dans un ordre donné, ces éléments seront alors numérotés. Ce type de liste est généralement utilisé pour lister des étapes à suivre.

Avant de vous lancer dans la création d’une liste, il faudra faire un choix sur son type, qui dépendra de l’importance de l’ordre des éléments. Par exemple, pour une recette de cuisine, vous utiliserez une liste non-ordonnée pour les ingrédients et une liste ordonnée pour les étapes de préparation.

La balise HTML correspondant aux listes non-ordonnées (« unordered list » en anglais) est <ul></ul>. Pour les listes ordonnées (« ordered list » en anglais), il faudra utiliser <ol></ol>.

Construire des listes

La liste est ouverte via <ul> ou <ol> puis chacun des éléments de la liste sera placé à l’intérieur d’un élément (« list item » en anglais) <li></li>.

<h1>Fondant au chocolat</h1>
 
<h2>Ingrédients</h2>
<ul>
    <li>2 œufs</li>
    <li>1/2 sachet de levure chimique</li>
    <li>200g de chocolat noir pâtissier</li>
    <li>100g de farine</li>
    <li>100g de beurre</li>
    <li>100g de sucre</li>
</ul>
 
<h2>Préparation</h2>
<ol>
    <li>Dans un saladier, ajoutez le chocolat et le beurre. Faites fondre.</li>
    <li>Dans un saladier, ajoutez le reste des ingrédients et mélangez.</li>
    <li>Mélangez le chocolat fondu et incorporez le à la pâte.</li>
    <li>Enfournez dans un four préchauffé à 180°C pendant 10 minutes.</li>
</ol>

Résultat dans un navigateur :

Personnaliser les listes

Il faudra se pencher sur le langage CSS pour personnaliser en profondeur les listes. Néanmoins HTML propose certaines options permettant d’agir sur les listes ordonnées.

Pour choisir le type de numérotation, vous pouvez utiliser l’attribut type. La valeur de l’attribut déterminera le type de numérotation :

• a : lettres minuscules
• A : lettres majuscules
• i : chiffres romains minuscules
• I : chiffres romains majuscules
• 1 : chiffres arabes

<ol type="A">
    <li>Ligne</li>
    <li>Ligne</li>
</ol>

Il est possible de changer le numéro de départ de la liste avec l’attribut start.

<ol start="5">
    <li>Ligne</li>
    <li>Ligne</li>
</ol>

Pour inverser l’ordre de numérotation, utilisez l’attribut reversed.

<ol reversed="reversed">
	<li>Ligne</li>
	<li>Ligne</li>
</ol>

Tous ces paramètres sont évidemment combinables :

<ol start="5" type="A">
    <li>Ligne</li>
    <li>Ligne</li>
    <li>Ligne</li>
    <li>Ligne</li>
</ol>

Résultat dans un navigateur :

Les listes imbriquées

Pour avoir plusieurs niveaux hiérarchiques dans une liste, il est nécessaire d’utiliser des listes imbriquées. Il suffit pour cela d’insérer une liste à l’intérieur d’un élément <li></li>.

<ul>
    <li>Ligne niveau 1</li>
    <li>Ligne niveau 1
        <ol>
            <li>Ligne niveau 2</li>
            <li>Ligne niveau 2</li>
            <li>Ligne niveau 2</li>
        </ol>
    </li>
    <li>Ligne niveau 1</li>
</ul>

Sauf mention contraire*, l'article Listes en HTML et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.