Télécharger le PDF du cours
Qu’est-ce qu’une liste HTML ? A quoi servent les listes ?
Le HTML est un langage de sémantique : son rôle est de donner du sens aux différents contenus d’une page afin que ceux-ci soient correctement reconnus et affichés et que les navigateurs et les moteurs de recherche « comprennent » nos pages.
Les listes HTML répondent tout à fait à cet objectif puisqu’elles permettent d’ordonner du contenu. Ce contenu peut être hiérarchisé ou non.
Une liste en HTML est composée de différents éléments de listes. Visuellement une liste va ressembler à ceci :
- Premier élément de ma liste,
- Deuxième élément de ma liste,
- Troisième élément de ma liste.
Les listes vont ainsi nous permettre de lister plusieurs éléments en les groupant sous un dénominateur commun qu’est la liste en soi. Les navigateurs et les moteurs de recherche vont donc comprendre qu’il y a une relation entre les différents éléments de liste.
Les listes vont donc déjà être très utiles pour apporter de la clarté et de l’ordre à nos documents. En plus de cela, nous allons également utiliser des listes HTML pour créer des menus de navigation (nous verrons comment plus tard dans ce cours).
Il existe deux grands types de listes en HTML : les listes ordonnées et les listes non-ordonnées. Il existe également un troisième type de liste un peu particulier et moins utilisé : les listes de définitions.
Les listes non ordonnées
Les listes non-ordonnées vont être utiles pour lister des éléments sans hiérarchie ni ordre logique.
Par exemple, si je souhaite lister les mots « pomme », « vélo » et « guitare », sans plus de contexte, j’utiliserai une liste non-ordonnée.
En effet, on ne peut pas dégager de notion d’ordre, de hiérarchie ou de subordination entre ces trois termes (du moins pas sans un contexte précis).
Pour créer une liste non-ordonnée, nous allons avoir besoin d’un élément ul (pour « unordered list », ou « liste non-ordonnée » en français) qui va représenter la liste en soi ainsi que d’un élément li (« list item » ou « élément de liste ») pour chaque nouvel élément de liste.
See the Pen Cours HTML CSS 2.8.1 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le remarquer, on va placer les éléments li à l’intérieur de l’élément de liste ul (à partir de ce moment, bien indenter son code commence à être important pour ne pas se perdre). C’est tout à fait logique puisque les éléments de liste « appartiennent » à une liste en particulier.
Visuellement, des puces (les points noirs) apparaissent automatiquement devant chaque élément d’une liste non-ordonnée par défaut. Nous allons pouvoir changer ce comportement et personnaliser l’apparence de nos listes en CSS grâce notamment à la propriété list-style-type que nous étudierions plus tard dans ce cours.
Les listes ordonnées
Au contraire des listes non-ordonnées, nous allons utiliser les listes ordonnées lorsqu’il y aura une notion d’ordre ou de progression logique ou encore de hiérarchie entre les éléments de notre liste.
Par exemple, si l’on souhaite lister les étapes naturelles de la vie, ou lorsque l’on crée un sommaire, on utilisera généralement des listes ordonnées.
Pour créer une liste ordonnée, nous allons cette fois-ci utiliser l’élément ol (pour « ordered list » ou « liste ordonnée ») pour définir la liste en soi et à nouveau des éléments li pour chaque élément de la liste.
See the Pen Cours HTML CSS 2.8.2 by Pierre (@pierregiraud) on CodePen.
Comme vous le voyez, ce sont cette fois-ci des numéros qui sont affichés devant chaque élément de la liste par défaut.
Encore une fois, nous allons pouvoir changer ce comportement et afficher différents styles de puces avec la propriété CSS list-style-type.
Les attributs HTML des listes ordonnées
En plus des propriétés CSS, on va pouvoir utiliser certains attributs HTML avec nos listes ordonnées pour modifier leur présentation.
Ici, vous devez absolument comprendre que ces attributs ne devraient pas exister à priori puisque le HTML ne devrait pas se soucier de la présentation mais devrait laisser l’apparence au CSS.
Cependant, les langages sont en constante évolution ce qui signifie que leur rôle n’est pas encore tout à fait fixé et que certains langages ne sont pas capables de faire certaines choses aujourd’hui. Ce sont les raisons principales pour l’existence de ces attributs que je vais vous présenter par souci d’exhaustivité.
Retenez simplement que vous devriez toujours privilégier l’utilisation du langage CSS pour la mise en forme des contenus HTML tant que vous le pouvez.
Commençons avec l’attribut type qui va nous permettre de changer l’apparence des puces d’une liste ordonnée.
Cet attribut existait autrefois également pour les listes non ordonnées mais a été déprécié pour celles-ci. Il est possible qu’il soit également déprécié dans le futur pour les listes ordonnées puisque le HTML ne devrait pas se charger de la mise en forme.
Pour cette raison, je vous déconseille de l’utiliser et vous conseille de préférer l’utilisation du CSS. Cependant, je vous présente tout de même les valeurs qu’on va pouvoir lui fournir par souci d’exhaustivité :
- « 1 » : valeur par défaut. Des chiffres apparaitront devant chaque élément de la liste ;
- « I » : Des chiffres romains majuscules apparaitront devant chaque élément de la liste ;
- « i » : Des chiffres romains minuscules apparaitront devant chaque élément de la liste ;
- « A » : Des lettres majuscules apparaitront devant chaque élément de la liste ;
- « a » : Des lettres minuscules apparaitront devant chaque élément de la liste.
Voici également un exemple d’utilisation de cet attribut :
See the Pen Cours HTML CSS 2.8.3 by Pierre (@pierregiraud) on CodePen.
Notez que par défaut le premier élément d’une liste ordonnée va avoir comme puce le chiffre « 1 » ou la première lettre de l’alphabet « a ». On va pouvoir changer ce comportement et faire démarrer notre liste ordonnée à partir d’un point choisi grâce aux attributs HTML start ou value.
L’attribut start va nous permettre de choisir un point de départ pour notre liste ordonnée. On va donc le placer dans la balise ouvrante de l’élément représentant la liste ol.
L’attribut value va lui en revanche nous permettre de choisir la valeur de chaque puce d’éléments de liste. On va pouvoir ajouter un attribut value pour chaque élément li. Dans le cas où certains éléments li ne possèderaient pas d’attribut value, la valeur de leur puce va s’incrémenter normalement par rapport à la valeur de la puce de l’élément précédent (c’est-à-dire ajouter 1 par rapport à la puce précédente).
Notez que dans le cas où un attribut start est précisé pour la liste et un attribut value est précisé pour le premier élément de liste, l’attribut value, plus précis, va avoir la priorité et imposer sa valeur.
Voici quelques exemples d’utilisation de ces attributs :
See the Pen Cours HTML CSS 2.8.4 by Pierre (@pierregiraud) on CodePen.
Finalement, nous allons pouvoir inverser le compte des puces des éléments de liste ordonnées grâce à l’attribut reversed. Le premier élément de la liste aura alors la puce avec la valeur la plus élevée, puis on enlèvera un par nouvel élément jusqu’à arriver à « 1 » ou « a » pour le dernier élément de liste par défaut.
L’attribut reversed ne possède qu’une valeur qui est reversed (identique au nom de l’attribut, comme pour tous les attributs qui ne possèdent qu’une valeur en HTML). Comme reversed ne possède qu’une valeur, la valeur est dite évidente et peut être omise.
See the Pen Cours HTML CSS 2.8.5 by Pierre (@pierregiraud) on CodePen.
Les listes de définitions
Les listes de définitions, encore appelées « listes de descriptions » vont nous permettre de lister des termes et d’ajouter des définitions ou descriptions pour chacun de ces termes.
Pour créer une liste de définitions, nous allons cette fois-ci utiliser l’élément dl signifiant « description list » ou « liste de description / définition » en français pour définir la liste en soi, puis des éléments dt (description term) pour chaque élément à décrire et enfin l’élément dd pour la définition / description en soi.
Pensez bien lorsque vous créez une liste de définitions à toujours placer le terme à définir avant sa définition, c’est-à-dire l’élément dt avant l’élément dd. Cela est normalement assez intuitif.
See the Pen Cours HTML CSS 2.8.6 by Pierre (@pierregiraud) on CodePen.
L’imbrication de listes
Finalement, sachez qu’il est tout-à-fait possible d’imbriquer une liste dans une autre en suivant quelques règles simples.
Pour imbriquer une liste dans une autre, il suffit de définir une nouvelle liste à l’intérieur de l’un des éléments d’une autre liste, juste avant la balise fermante de cet élément.
See the Pen Cours HTML CSS 2.8.7 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le voir, il devient ici très important de bien indenter son code afin de ne pas se perdre au milieu de nos listes !
Notez que l’on peut imbriquer autant de listes que l’on souhaite les unes dans les autres. Cependant, pour des raisons évidentes de lisibilité, il est conseillé de ne pas créer plus de niveaux de listes que ce qui est strictement nécessaire pour servir vos besoins.
