HTML
Des listes

Introduction

Syntaxe

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

Remarques

Liste non ordonnée

Une liste non ordonnée peut être créée avec la <ul> et chaque élément de la liste peut être créé avec la <li> comme le montre l'exemple ci-dessous:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Cela produira une liste à puces (qui est le style par défaut):

• Article
• Un autre article
• Encore un autre article

Vous devez utiliser ul pour afficher une liste d'éléments, où l'ordre des éléments n'est pas important. Si la modification de l'ordre des éléments rend la liste incorrecte, vous devez utiliser <ol> .

Liste ordonnée

Une liste ordonnée peut être créée avec la <ol> et chaque élément de la liste peut être créé avec la <li> comme dans l'exemple ci-dessous:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Cela produira une liste numérotée (qui est le style par défaut):

1. Article
2. Un autre article
3. Encore un autre article

Changer manuellement les numéros

Il y a plusieurs façons de jouer avec les numéros qui apparaissent sur les éléments d'une liste ordonnée. La première consiste à définir un numéro de départ en utilisant l'attribut start . La liste commencera à ce numéro défini et continuera à incrémenter de un comme d'habitude.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Cela produira une liste numérotée (qui est le style par défaut):

3. Article
4. Un autre article
5. Encore un autre article

Vous pouvez également définir explicitement un certain élément de liste sur un numéro spécifique. Les autres éléments de liste après l'un avec une valeur spécifiée continueront à incrémenter d'une valeur de cet élément de la liste, en ignorant où se trouvait la liste parente.

<li value="7"></li>

Il est également intéressant de noter qu'en utilisant l'attribut value directement sur un élément de la liste, vous pouvez remplacer le système de numérotation existant d'une liste ordonnée en redémarrant la numérotation à une valeur inférieure. Donc, si la liste parente était déjà à la valeur 7 et rencontrait un élément de liste à la valeur 4, cet élément de liste afficherait toujours 4 et continuerait à compter à partir de ce point.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Ainsi, l'exemple ci-dessus produira une liste qui suit le schéma de numérotation de 5, 6, 4, 5, 6 - recommençant à un nombre inférieur au précédent et dupliquant le nombre 6 dans la liste.

Remarque: les attributs de start et de value n'acceptent qu'un nombre - même si la liste ordonnée est définie pour s'afficher sous forme de chiffres romains ou de lettres.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Changer le type de chiffre

Vous pouvez facilement changer le type de chiffre indiqué dans le marqueur d'élément de liste en utilisant l'attribut type

<ol type="1|a|A|i|I">

Vous devez utiliser ol pour afficher une liste d'éléments, où les articles ont été intentionnellement ordonnés et la commande doit être soulignée. Si la modification de l'ordre des éléments ne rend pas la liste incorrecte, vous devez utiliser <ul> .

Liste de description

Une liste de description (ou une liste de définitions , comme on l'appelait avant HTML5) peut être créée avec l'élément dl . Il se compose de groupes nom-valeur, où le nom est donné dans l'élément dt et la valeur est donnée dans l'élément dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Démo en direct

Un groupe nom-valeur peut avoir plusieurs noms et / ou plusieurs valeurs (qui représentent des alternatives):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Démo en direct

Listes imbriquées

Vous pouvez imbriquer des listes pour représenter des sous-éléments d'un élément de liste.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• objet 1
• article 2
  • sous-point 2.1
  • sous-point 2.2
• article 3

La liste imbriquée doit être un enfant de l'élément li .

Vous pouvez également imbriquer différents types de liste:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>