Les balises de liste

Les listes sont un élément incontournable du HTML dans nos sites web d’aujourd’hui. Numérotées ou à puces, vous avez divers moyens de les utiliser à votre guise.

`ol`

source ↗

La balise <ol> sert à afficher une liste ordonnée, c’est-à-dire une liste présentée avec des numéros.

index.html

  <ol>
    <li>Premier</li>
    <li>Deuxième</li>
    <li>Troisième</li>
  </ol>

Premier
Deuxième
Troisième

Il est possible d’avoir plusieurs niveaux d’indentation, chacun ayant sa propre numérotation.

index.html

  <ol>
    <li>Premier</li>
    <li>
      Deuxième
      <ol>
        <li>Enfant 1</li>
        <li>Enfant 2</li>
        <li>Enfant 3</li>
      </ol>
    </li>
    <li>Troisième</li>
  </ol>

Premier
Deuxième
1. Enfant 1
2. Enfant 2
3. Enfant 3
Troisième

Il est aussi possible de spécifier le numéro de départ de la liste.

index.html

  <ol start="5">
    <li>Premier</li>
    <li>Deuxième</li>
    <li>Troisième</li>
  </ol>

Premier
Deuxième
Troisième

`ul`

source ↗

La balise <ul> sert à afficher une liste non ordonnée, c’est-à-dire une liste présentée avec des puces (stylisables).

index.html

  <ul>
    <li>Premier</li>
    <li>Deuxième</li>
    <li>Troisième</li>
  </ul>

Premier
Deuxième
Troisième

Il est possible d’avoir plusieurs niveaux d’indentation, chacun avec sa propre puce.

index.html

  <ul>
    <li>Premier</li>
    <li>
      Deuxième
      <ul>
        <li>Enfant 1</li>
        <li>Enfant 2</li>
        <li>Enfant 3</li>
      </ul>
    </li>
    <li>Troisième</li>
  </ul>

Premier
Deuxième
- Enfant 1
- Enfant 2
- Enfant 3
Troisième

`li`

source ↗

La balise <li> permet d’insérer une nouvelle puce au sein d’une liste <ol> ou <ul>. Il est d’ailleurs possible de modifier quelle typologie de puce afficher ↗.

index.html

  <ul>
    <li>Premier</li>
    <li style="list-style-type: circle;">Deuxième</li>
    <li style="list-style-type: square;">Troisième</li>
  </ul>

Premier
Deuxième
Troisième