Listes

Les listes permettent de structurer des énumérations. HTML propose 3 types de listes :

Éléments HTML de structuration

ol

Environnement de liste numérotée.

ul

Environnement de liste à puces.

li

Élément de liste.

dl

Environnement de liste de définitions.

dt

Terme à définir.

dd

Définition.

L'exemple ci-dessous illustre l'utilisation des environnements de liste, ainsi que la relation entre environnement et élément de liste.

<p>Liste numérotée</p>
<ol>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ol>

<p>Liste à puces</p>
<ul>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

<p>Liste de définitions</p>
<dl>
  <dt>un</dt>
  <dd>Premier entier naturel non nul</dd>
  <dt>deux</dt>
  <dd>un plus un</dd>
  <dt>trois</dt>
  <dd>deux plus un</dd>
</dl>

Liste numérotée

  1. un
  2. deux
  3. trois

Liste à puces

Liste de définitions

un
Premier entier naturel non nul
deux
un plus un
trois
deux plus un

Propriétés CSS

list-style-type

Symbole affiché à gauche de chaque élément d'une liste. Cette propriété a pour valeurs none, circle, disc, square, decimal, ... Pour plus de détails, consulter la liste complète des valeurs autorisées.

list-style-image

Fichier image utilisé comme marqueur de liste. L'emplacement du fichier image est précisé par la fonction CSS url.

ul {
  list-style-image: url("img/icon.png");
}

list-style-position

Puces (ou numéros) affichés à l'intérieur (inside) ou à l'extérieur (outside) du bloc de texte.

ol {
  list-style-position: outside;
}

ul {
  list-style-position: inside;
}
<p>Liste numérotée</p>
<ol>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ol>

<p>Liste à puces</p>
<ul>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

Liste numérotée

  1. un
  2. deux
  3. trois

Liste à puces

Exercice 9

Convertissez le document texte risotto.txt en HTML en utilisant les trois environnements de liste.

Correction

Exercice 10

Concevez le code HTML et CSS afin de reproduire fidèlement l'exemple ci-dessous. exemple de listes imbriquées

Correction