Listes

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 été de créer un 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 pour chaque question sont des listes imbriquées.

HTML nous offre plusieurs méthodes pour baliser les listes. Il existe des listes numérotées (<ol>), des listes non triées (<ul>) et des listes de descriptions (<dl>). Les éléments de liste (<li>) sont imbriqués dans des listes ordonnées et des listes non ordonnées. La liste de descriptions contient des termes descriptifs (<dt>) et des descriptions détails <dd>. Tous ces points sont abordés ici.

Dans les formulaires HTML, les listes d'éléments <option> constituent le contenu de <datalist>, <select> et <optgroup> dans un élément <select>. Ceux-ci sont abordés dans les formulaires HTML.

Dans les menus et les listes non ordonnées, les éléments de liste sont généralement affichés sous forme de puces. Dans les listes numérotées, elles sont généralement précédées par un compteur croissant comme un chiffre ou une lettre. Les puces et l'ordre de numérotation peuvent être contrôlés ou inversés avec HTML ou CSS. ou les deux.

Par défaut, les éléments de liste, qu'ils soient ordonnés ou non, sont précédés de chiffres ou de puces. Mais même si vous ne voulez pas que vos listes ressemblent à des listes, vous voulez toujours une liste d'éléments, comme dans des 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 non triées

L'élément <ul> est l'élément parent des listes d'éléments non ordonnées. Les seuls enfants d'une <ul> sont une ou plusieurs listes <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 de liste non ordonné est précédé d'une puce. La liste non ordonnée ne comporte aucun attribut spécifique à l'élément. Vous devez clôturer vos listes avec un </ul>.

Listes ordonnées

L'élément <ol> est l'élément parent pour les listes d'éléments numérotées. Les seuls enfants d'une <ol> sont un ou plusieurs éléments <li>, ou des éléments de liste. Les puces dans ce cas, il existe une multitude de types de nombres. 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 aux éléments: type, reversed et start.

L'attribut type énuméré définit le type de numérotation. Il existe cinq valeurs valides pour type, la valeur par défaut 1 pour mais vous pouvez également utiliser les lettres minuscules et majuscules ou les chiffres romains pour les lettres minuscules et majuscules. Propriété list-style-type fournit beaucoup plus de valeurs.

Alors que, comme indiqué dans le code, la propriété list-style-type remplace la valeur de l'attribut type, lors de l'écriture documentation où le type numérique est important, comme pour les documents juridiques, par exemple, vous devez inclure le type.

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

Comme pour </ul>, la </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'un <ol> correspond à 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 de manière formelle. L'élément <li> peut être un enfant direct d'un élément non ordonné. liste (<ul>), une liste numérotée (<ol>) ou un menu (<menu>). Le <li> doit être imbriqué en tant qu'enfant de l'un de ces éléments. n'est valide nulle part ailleurs.

La spécification n'exige pas la fermeture d'un élément de liste, car il sera implicitement fermé lorsque le navigateur rencontrera le <li> suivant. balise d'ouverture ou balise de fermeture de liste obligatoire: </ul>, </ol>, </menu>. Bien que les spécifications ne l'exigent pas, et certaines entreprises internes Les bonnes pratiques suggèrent de ne pas fermer les éléments de liste pour économiser quelques octets. Fermez plutôt vos balises <li>. Cela rend votre code plus facile à lire et que vous vous en féliciterez plus tard. Il est plus facile de fermer tous les éléments que de mémoriser les balises à fermer et celles qui comportent une balise de fermeture facultative.

Il n'y a qu'un seul attribut <li> spécifique à l'élément: value, qui est un entier. Le value n'est utile sur un <li> que lorsque l'<li> est imbriqué dans une liste numérotée et n'a aucun sens pour les listes ou les menus non ordonnés. En cas de conflit, cet attribut remplace la valeur de début de <ol>.

value est le numéro de l'élément dans une liste numérotée. Avec les éléments de liste suivants, continuez la numérotation à partir du , sauf si un attribut value est également défini pour cet article. La valeur n'a pas besoin d'être dans l'ordre. Toutefois, si ce n'est pas en ordre, il devrait y avoir une bonne raison.

Lorsque vous combinez reversed sur <ol> avec des attributs value sur les éléments de la liste, le navigateur définit cette <li> sur la fournie, puis compte à rebours pour les <li> qui la précèdent et pour celles qui la suivent. Si un deuxième élément de liste possède un attribut de valeur, le compteur est réinitialisé au niveau du deuxième élément de la liste et la valeur suivante diminue d'une unité.

Tout cela peut aussi être contrôlé à l'aide de compteurs CSS Fournir du contenu généré pour le pseudo-élément ::marker Si le numéro ne sert qu'à une présentation, utilisez du code CSS. Si la numérotation est importante d'un point de vue sémantique ou si elle 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 trouvé dans le corps et qui peut être imbriqué en tant qu'enfant direct de l'élément <body>, y compris les titres, ce qui divise le contenu.

Nous avons quelques listes non triées dans MLW. Les enseignants de la section "Enseignants" sont une liste, tout comme les ordinateurs des élèves dans les avis. . L'enseignant <ul> a deux <li>: un pour chaque enseignant. Chaque <li> contient 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 des avis contient trois avis, soit trois <li>. Chacun d'eux contient une image, un guillemet 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̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇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, contrairement à ce site. Dans le premier chapitre de cette série, Présentation du langage HTML. La section "Principale des éléments" comporte deux sous-sections. Dans la table des matières, qui est une liste non ordonnée, Liste non ordonnée comportant 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 est trouvée 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 des deux <ul> et <ol> est list, ce qui supprime l'apparence de la liste avec CSS, y compris le paramètre display: grid ou list-style-type: none. peut amener VoiceOver (le lecteur 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 "rôle" lorsque vous utilisez des éléments sémantiques, car cela n'est pas nécessaire. En général, vous n'avez pas 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 quand l'utilisateur a intérêt à connaître le nombre d'éléments de la liste.

Listes de descriptions

Une liste de descriptions est un élément de liste de descriptions (<dl>) contenant une série de termes descriptifs (<dt>) (zéro ou plus) et la description détaillée (<dd>). Les noms originaux de ces trois éléments étaient « liste de définitions », "terme de définition" et « définition de définition ». Le nom a changé dans le quotidien.

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 historique de carrière et leurs aspirations. Une liste de descriptions des élèves, indiquées par le <dl>, englobe un groupe de termes. Dans ce cas, les "termes" contiennent les noms des élèves, spécifiés à l'aide de l'élément <dt>, accompagnés d'une description. pour chaque terme (ici, 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 concernent pas que des termes et des définitions, 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, la description répertorie les éléments pour fournir la sémantique appropriée. Le rôle implicite d'un <dt> est term, et listitem est un autre rôle autorisé. Le rôle implicite de <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. Toutefois, lorsqu'il l'est, il accepte les rôles list et group.

Le plus souvent, vous rencontrerez des listes de descriptions contenant un nombre égal d'éléments <dt> et <dd>. Mais les listes de descriptions ne sont pas toujours et ne doivent pas nécessairement correspondre à des paires terme/description. vous pouvez avoir plusieurs à un ou un à plusieurs, comme un terme du 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 de utilisez le combinateur frère adjacent ou le combinaison relationnel :has() sélecteur pour cibler les nombres de variables de ces éléments avec CSS. Si nécessaire, vous pouvez inclure un <div> en tant qu'enfant d'un élément <dl>, et le parent d'un ou de plusieurs éléments <dt> ou <dd> (ou des deux) sont autorisés. Le <dl> peut en fait quelques autres enfants: l'imbrication d'un <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 ce que sont les liens et les listes, réunissons-les pour créer la navigation.

Testez vos connaissances

Testez vos connaissances sur les listes.