Listes

bookmark_border Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Les listes sont plus courantes que vous ne le pensez. Si vous avez déjà suivi un cours de programmation, votre premier projet a peut-être consisté à créer une liste de courses ou une liste de tâches. Il s'agit de listes. Les tests à choix multiples sont généralement des listes numérotées de questions : les multiples réponses possibles pour chaque question sont des listes imbriquées.

HTML nous offre plusieurs façons de baliser les listes. Il existe des listes ordonnées (<ol>), des listes non ordonnées (<ul>) et des listes de description (<dl>). Les éléments de liste (<li>) sont imbriqués dans les listes ordonnées et non ordonnées. Dans une liste de descriptions, vous trouverez des termes de description (<dt>) et des détails de description <dd>.. Nous les abordons tous ici.

Dans les formulaires HTML, les listes d'éléments <option> constituent le contenu de <datalist> <select> et <optgroup> dans un <select>. Ces éléments sont abordés dans la section Formulaires HTML.

Dans les menus et les listes non ordonnées, les éléments de liste sont généralement affichés à l'aide de puces. Dans les listes ordonnées, ils sont généralement précédés d'un compteur croissant, tel qu'un chiffre ou une lettre. L'ordre des puces et de la numérotation peut être contrôlé ou inversé avec HTML ou CSS, ou les deux.

Par défaut, les éléments de liste ordonnée et non ordonnée sont précédés de chiffres ou de puces. Mais même lorsque vous ne voulez pas que les listes ressemblent à des listes, vous voulez quand même une liste d'éléments, comme dans les barres de navigation, une liste de tâches avec des cases à cocher au lieu de puces, ou des questions vrai/faux dans un test à choix multiples. Pour toutes ces listes sans puces, il convient d'utiliser des éléments de liste HTML.

Listes à puces

L'élément <ul> est l'élément parent des listes d'éléments non ordonnés. Les seuls enfants d'un élément <ul> sont un ou plusieurs éléments de liste <li>.

Créons une liste de machines. Nous utilisons une liste non ordonnée, car l'ordre n'a pas d'importance (ne le leur dites pas).

Par défaut, chaque élément de liste non ordonnée est précédé d'une puce. La liste non ordonnée ne comporte aucun attribut spécifique à un élément. Vous devez terminer vos listes par un </ul>.

Listes ordonnées

L'élément <ol> est l'élément parent des listes ordonnées d'éléments. Les seuls enfants d'un <ol> sont un ou plusieurs éléments <li>, ou éléments de liste. Dans ce cas, les "puces" sont des nombres de différents types. Le type peut être défini en CSS avec la propriété list-style-type ou avec l'attribut type.

<ol> comporte trois attributs spécifiques à l'élément : type, reversed et start.

L'attribut énuméré type définit le type de numérotation. Il existe cinq valeurs valides pour type, la valeur par défaut étant 1 pour les nombres. Vous pouvez également utiliser a, A, i ou I pour les lettres minuscules et majuscules ou les chiffres romains. La propriété list-style-type fournit beaucoup plus de valeurs.

Comme indiqué dans le codepen, la propriété list-style-type remplace la valeur de l'attribut type. Toutefois, lorsque vous rédigez une documentation où le type numérique est important (comme pour les documents juridiques, par exemple), vous devez inclure type.

L'attribut booléen reversed, s'il est inclus, inverse l'ordre des nombres, du plus grand au plus petit. L'attribut start définit la valeur de départ. La valeur par défaut est 1.

Comme pour </ul>, la balise de fermeture </ol> est obligatoire.

Nous pouvons imbriquer des listes, mais elles doivent l'être dans un élément de liste. N'oubliez pas que le seul élément pouvant être l'enfant d'un élément <ul> ou <ol> est un ou plusieurs éléments <li>.

Éléments de la liste

Nous avons utilisé l'élément <li>, mais nous ne l'avons pas encore présenté de manière formelle. L'élément <li> peut être un enfant direct d'une liste non ordonnée (<ul>), d'une liste ordonnée (<ol>) ou d'un menu (<menu>). L'élément <li> doit être imbriqué en tant qu'enfant de l'un de ces éléments. Il n'est pas valide ailleurs.

La spécification n'exige pas la fermeture d'un élément de liste, car il est fermé de manière implicite lorsque le navigateur rencontre la balise d'ouverture <li> suivante ou la balise de fermeture de liste requise : </ul>, </ol>, </menu>. Bien que la spécification ne l'exige pas et que certaines bonnes pratiques internes à l'entreprise suggèrent de ne pas fermer les éléments de liste pour économiser quelques octets, vous devez quand même fermer vos balises <li>. Cela rend votre code plus facile à lire, et vous vous en remercierez plus tard.

Il est plus facile de fermer tous les éléments que de se souvenir des balises qui doivent être fermées et de celles qui ont une balise de fermeture facultative.

Il n'existe qu'un seul attribut <li> spécifique à l'élément : value, un entier. value n'est utile sur un <li> que lorsque le <li> est imbriqué dans une liste ordonnée et n'a aucune signification pour les listes non ordonnées ou les menus. Elle remplace la valeur de début de <ol> en cas de conflit.

value correspond au numéro de l'élément de liste dans une liste ordonnée. Pour les éléments de liste suivants, poursuivez la numérotation à partir de la valeur définie, sauf si cet élément comporte également un attribut value. La valeur n'a pas besoin d'être dans l'ordre, mais si ce n'est pas le cas, il doit y avoir une bonne raison.

Lorsque vous combinez reversed sur <ol> avec les attributs value sur les éléments de liste, le navigateur définit <li> sur la valeur fournie, puis incrémente les <li> qui le précèdent et décrémente ceux qui le suivent. Si un deuxième élément de liste possède un attribut de valeur, le compteur est réinitialisé à ce deuxième élément de liste, et la valeur suivante diminue d'une unité.

Tout cela peut également être contrôlé avec les compteurs CSS qui fournissent du contenu généré pour le pseudo-élément ::marker. Si le nombre est purement destiné à la présentation, utilisez CSS. Utilisez ces attributs si la numérotation est importante d'un point de vue sémantique ou si elle a une signification.

Jusqu'à présent, nous avons examiné les éléments de liste contenant uniquement des nœuds de texte. Les éléments de liste peuvent contenir tout le contenu de flux, c'est-à-dire tout élément trouvé dans le corps qui peut être imbriqué en tant qu'enfant direct de <body>, y compris les titres, sectionnant ainsi le contenu.

MLW contient quelques listes non ordonnées. Les enseignants de la section "Instructeurs" sont listés, tout comme les machines des élèves dans la section "Examens". L'instructeur <ul> possède deux <li>, un pour chaque enseignant. Dans chaque <li>, nous avons une image et un paragraphe :

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

La section "Avis" comporte trois avis, donc trois <li>. Chacun contient une image, une citation et un paragraphe de trois lignes avec deux sauts de ligne.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Il est également très courant d'imbriquer des listes dans des listes. Contrairement à MLW, ce site contient des listes imbriquées. Dans le premier module de cette série, "Présentation du HTML", la section sur les éléments principaux comporte deux sous-sections. Dans la table des matières, qui est une liste non ordonnée, se trouve une liste non ordonnée imbriquée avec des liens vers ces deux sections :

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Étant donné que le seul enfant d'un <ul> est un <li>, une liste imbriquée se trouve imbriquée dans un <li>, jamais directement dans un <ol> ou un <ul>.

Dans ce dernier exemple, vous avez peut-être remarqué que role="list" est inclus dans <ul>. Bien que le rôle implicite de <ul> et <ol> soit list, la suppression de l'apparence de la liste avec CSS, y compris la définition de display: grid ou list-style-type: none, peut entraîner la suppression de la sémantique implicite dans Safari par VoiceOver (le lecteur d'écran iOS et macOS). Il s'agit d'une fonctionnalité, et non d'un bug. En règle générale, vous ne devez pas ajouter l'attribut de rôle lorsque vous utilisez des éléments sémantiques, car ce n'est pas nécessaire. En général, vous n'avez pas non plus besoin d'en ajouter un à une liste, sauf si l'utilisateur a vraiment besoin de savoir qu'il s'agit d'une liste, par exemple lorsqu'il aurait intérêt à connaître le nombre d'éléments qu'elle contient.

Listes de descriptions

Une liste de descriptions est un élément description list (<dl>) contenant une série de (zéro ou plusieurs) description terms (<dt>) et leurs description details (<dd>). Les noms d'origine de ces trois éléments étaient "definition list", "definition term" et "definition definition". Le nom a changé dans le niveau de vie.

Comme les listes ordonnées et non ordonnées, elles peuvent être imbriquées. Contrairement aux listes ordonnées et non ordonnées, elles sont constituées de paires clé/valeur. Comme pour <ul> et <ol>, <dl> est le conteneur parent. Les éléments <dt> et <dd> sont les enfants de <dl>.

Nous pouvons créer une liste de machines avec leur parcours professionnel et leurs aspirations. Une liste de description des élèves, indiquée par <dl>, englobe un groupe de termes spécifiés à l'aide de l'élément <dt>, ainsi qu'une description pour chaque terme spécifié par les éléments <dd>. Dans ce cas, les "termes" sont les noms des élèves et les descriptions sont leurs objectifs de carrière.

Cette liste de description ne fait pas partie de la page MLW. Les listes de description ne sont pas réservées aux termes et définitions. C'est pourquoi les noms des éléments ont été rendus plus généraux.

Lorsque vous créez une liste de termes et de leurs définitions ou descriptions, ou des listes similaires de paires clé/valeur, les éléments de liste de description fournissent la sémantique appropriée. Le rôle implicite d'un <dt> est term, listitem étant un autre rôle autorisé. Le rôle implicite d'un <dd> est definition, et aucun autre rôle n'est autorisé. Contrairement à <ul> et <ol>, <dl> ne possède pas de rôle ARIA implicite. Cela est logique, car <dl> n'est pas toujours une liste. Mais lorsqu'il l'est, il accepte les rôles list et group.

Le plus souvent, vous rencontrerez des listes de descriptions avec un nombre égal d'éléments <dt> et <dd>. Toutefois, les listes de descriptions ne sont pas toujours et ne doivent pas nécessairement être des paires terme-description correspondantes. Vous pouvez avoir plusieurs descriptions pour un terme ou un terme pour plusieurs descriptions, comme un terme de dictionnaire qui a plusieurs définitions.

Chaque <dt> est associé à au moins un <dd>, et chaque <dd> est associé à au moins un <dt>. Bien qu'il soit possible d'utiliser le combinateur de frères adjacents ou le sélecteur relationnel :has() pour cibler un nombre variable de ces éléments avec CSS, vous pouvez, si nécessaire, inclure un <div> en tant qu'enfant d'un <dl>, et le parent d'un ou plusieurs éléments <dt> ou <dd> (ou les deux) est autorisé. L'élément <dl> peut en fait avoir d'autres enfants : l'imbrication d'un élément <div>, <template> ou <script> est autorisée. Aucun des éléments de la liste de description ne comporte d'attributs spécifiques à un élément.

Maintenant que vous avez compris les liens et les listes, nous pouvons les combiner pour créer une navigation.

Vérifier que vous avez bien compris

Testez vos connaissances sur les listes.