Les listes sont plus courantes que vous ne le pensez. Si vous avez déjà suivi un cours de programmation, le premier projet a peut-être été de créer une liste de courses ou une liste de tâches. Ce sont des listes. Les tests à choix multiples sont généralement des listes de questions numérotées: les réponses multiples possibles à chaque question sont des listes imbriquées.
HTML propose plusieurs façons de baliser les listes. Il existe des listes numérotées (<ol>), des listes à puces (<ul>) et des listes de descriptions (<dl>).
Les éléments de liste (<li>) sont imbriqués dans des listes numérotées et des listes à puces. Dans une liste de descriptions, vous trouverez les termes descriptifs (<dt>) et les détails de la description. <dd>. Nous aborderons tous ces termes ici.
Dans les formulaires HTML, les listes d'éléments <option> constituent le contenu de <datalist>, <select> et <optgroup> dans une <select>. Celles-ci sont traitées dans les formulaires HTML.
Dans les menus et les listes à puces, les éléments sont généralement affichés sous forme de puces. Dans les listes ordonnées, elles sont généralement précédées d'un compteur croissant tel qu'un chiffre ou une lettre. Les puces et l'ordre de numérotation peuvent être contrôlés et inversés avec HTML, CSS, ou les deux.
Par défaut, les éléments de liste (triés ou non) sont précédés de chiffres ou de puces. Toutefois, même si vous ne voulez pas que les listes ressemblent à des listes, vous devez toujours disposer d'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 et faux dans un test à choix multiples. Pour toutes ces listes sans puces, il est approprié 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ées. Les seuls enfants d'un élément <ul> sont un ou plusieurs éléments d'élément 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 dites pas):
Par défaut, chaque élément non ordonné de la liste est précédé d'une puce. La liste à puces ne comporte aucun attribut spécifique à l'élément.
Vous devez clôturer vos listes avec une </ul>.
Listes numérotées
L'élément <ol> est l'élément parent des listes d'éléments ordonnées. Les seuls enfants d'un élément <ol> sont un ou plusieurs éléments <li> ou des éléments de liste.
Dans ce cas, les "puces" représentent des nombres de tous types. Le type peut être défini en CSS avec la propriété list-style-type ou via l'attribut type.
<ol> comporte trois attributs spécifiques à un élément: type, reversed et start.
L'attribut type énuméré définit le type de numérotation. Cinq valeurs sont valides pour type, la valeur par défaut étant 1 pour les nombres, mais 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.
Bien que, comme indiqué dans le codepen, la propriété list-style-type remplace la valeur de l'attribut type, lorsque vous écrivez une documentation pour laquelle le type numérique est important, comme dans 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 propriété </ol> de fermeture est obligatoire.
Nous pouvons imbriquer des listes, mais elles doivent être imbriquées dans un élément de liste. N'oubliez pas que le seul élément qui peut être un enfant d'une <ul> ou d'une <ol> est un ou plusieurs éléments <li>.
Éléments de liste
Nous avons utilisé l'élément <li>, mais nous ne l'avons pas encore introduit officiellement. L'élément <li> peut être un enfant direct d'une liste non ordonnée (<ul>), d'une liste numéroté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 et n'est valide nulle part ailleurs.
La spécification n'exige pas la fermeture d'un élément de liste, car il est fermé implicitement lorsque le navigateur rencontre la prochaine balise d'ouverture <li> 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, fermez vos balises <li>. Cela rend votre code plus facile à lire
et vous en serez reconnaissant par la suite. 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 comportent 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 que sur un <li> lorsque le <li> est imbriqué dans une liste numérotée et n'a aucune signification pour les listes ou les menus non ordonnés. Elle remplace la valeur du début de <ol> en cas de conflit.
value correspond au numéro de l'élément dans une liste numérotée. Pour les éléments de liste suivants, poursuivez la numérotation à partir de la valeur définie, sauf si cet élément possède également un attribut value défini. Il n'est pas nécessaire que la valeur soit dans l'ordre. Toutefois, si elle ne l'est pas, il devrait y avoir une bonne raison.
Lorsque vous combinez reversed sur <ol> avec des attributs value pour les éléments de la liste, le navigateur définit cet élément <li> sur la valeur fournie, puis comptabilise les <li> qui le précèdent et génère un compte à rebours pour ceux qui suivent. Si un deuxième élément de liste possède un attribut de valeur, le compteur est réinitialisé au niveau de ce deuxième élément de liste et la valeur suivante diminue d'une unité.
Tout cela peut également être contrôlé à l'aide de compteurs CSS fournissant du contenu généré pour le pseudo-élément ::marker.
Si le numéro est purement présentation, utilisez du code CSS. Si la numérotation est importante d'un point de vue sémantique ou a un sens, utilisez ces attributs.
Jusqu'à présent, nous avons examiné les éléments de liste ne contenant que des nœuds de texte. Les éléments de liste peuvent contenir tout le contenu du flux, c'est-à-dire tout élément du corps pouvant être imbriqué en tant qu'enfant direct de <body>, y compris les en-têtes, ce qui sectionne le contenu.
Nous avons quelques listes
non ordonnées dans MLW. Les enseignants de la section des enseignants apparaissent sous forme de liste, tout comme les ordinateurs des élèves dans la section des avis. L'enseignant <ul> a deux <li>: une 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, <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" contient trois avis, soit trois <li>. Chacun d'entre eux 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. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
L'imbrication de listes dans des listes est également très courante. MLW n'a pas de listes imbriquées, alors que ce site en contient. Dans le premier chapitre de cette série, Présentation du langage HTML, la section des éléments principaux comporte deux sous-sections. La table des matières, qui est une liste non ordonnée, contient une liste imbriquée non ordonnée avec des liens vers les deux sections suivantes:
<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 élément <ul> est un élément <li>, une liste imbriquée est imbriquée dans un élément <li>, et jamais directement dans un élément <ol> ou <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 de <ol> soit list, la suppression de l'apparence de la liste avec CSS, y compris le paramètre display: grid ou list-style-type: none, peut amener VoiceOver (les lecteurs d'écran iOS et macOS) à supprimer la sémantique implicite dans Safari. 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. De plus, vous n'avez généralement pas besoin d'en ajouter une à une liste, sauf si l'utilisateur a vraiment besoin de savoir qu'il s'agit d'une liste, par exemple à quel moment il aurait besoin de connaître le nombre d'éléments dans la liste.
Listes de descriptions
Une liste de descriptions est un élément de liste de descriptions (<dl>) contenant une série de termes de description (<dt>) et leurs informations de description (<dd>). À l'origine, ces trois éléments étaient nommés "liste de définition", "terme de définition" et "définition de définition".
Le nom a changé dans le niveau de vie.
Comme les listes triées et non triées, elles peuvent être imbriquées. Contrairement aux listes ordonnées et non ordonnées, elles sont constituées de paires clé/valeur.
Comme <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 historique de carrière et leurs aspirations. Une liste de descriptions des élèves, indiquée par <dl>, comprend un groupe de termes (dans ce cas, les "termes" sont des noms d'élèves) spécifiés à l'aide de l'élément <dt>, ainsi qu'une description de chaque terme (dans ce cas, les objectifs de carrière de chaque élève) spécifiés par les éléments <dd>.
Cette liste de descriptions ne fait pas partie de la page MLW. Les listes de descriptions ne sont pas réservées aux termes et aux définitions. C'est pourquoi les noms des éléments ont été rendus plus généraux.
Lors de la création d'une liste de termes et de leurs définitions ou descriptions, ou de listes similaires de paires clé/valeur, les éléments des listes 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. Aucun autre rôle n'est autorisé. Contrairement à <ul> et <ol>, <dl> n'a pas de rôle ARIA implicite.
C'est logique, car <dl> n'est pas toujours une liste. En revanche, les rôles list et group sont acceptés.
Le plus souvent, vous rencontrerez des listes de descriptions contenant le même nombre d'éléments <dt> et <dd>. Toutefois, les listes de descriptions ne sont pas toujours et n'ont pas besoin d'être des paires terme/description. Vous pouvez en avoir plusieurs à un ou un à plusieurs, comme un terme de dictionnaire ayant plusieurs définitions.
Chaque <dt> est associée à au moins un <dd>, et chaque <dd> est associé à au moins un <dt>. Bien qu'il soit possible d'utiliser le combinateur frère/sœur adjacent ou le sélecteur relationnel :has() pour cibler les nombres variables de ces éléments avec CSS, si nécessaire, vous pouvez inclure une <div> en tant qu'enfant d'une <dl>. Le parent d'un ou de plusieurs éléments <dt> ou <dd> (ou les deux) est autorisé. Le <dl> peut avoir d'autres enfants: l'imbrication de <div>, <template> ou <script> est autorisée. Aucun élément de la liste de descriptions ne comporte d'attribut spécifique à l'élément.
Maintenant que vous savez en quoi consistent les liens et les listes, compilons-les pour créer un système de navigation.
Testez vos connaissances
Testez vos connaissances sur les listes.
Est-il possible d'inclure un <h2> dans un élément de liste ?
Sélectionnez les trois éléments qui définissent les types de liste.
<il><ol><ul><dl>