Les listes

En HTML, il y a plusieurs sortes de listes : listes ordonnées, listes non-ordonnées et listes de définitions.

Les listes ordonnées et non-ordonnées

Les listes ordonnées et non-ordonnées sont le type de listes auquel nous sommes habitués. La seule différence entre-elles est que les listes ordonnées comportent des numéros alors que par défaut les éléments des listes non-ordonnées commencent par des puces. Les balises pour déclarer une liste ordonnée sont <ol></ol> (ol = « ordered list » = liste ordonnée), alors que pour une liste non-ordonnée, elles sont <ul></ul> (ul = « unordered list » = liste non-ordonnée). Dans les deux cas, chaque élément de la liste est délimité par les balises <li></li> (li = « list item » = élément de la liste)

Voici un exemple. Le code :

<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>

va générer des résultats qui ressemblent à ceci :

  1. Élément 1
  2. Élément 2
  3. Élément 3

et le code :

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

va générer des résultats comme :

  • Élément 1
  • Élément 2
  • Élément 3

De nouveau, la disposition et le formatage par défaut ne

sont pas très attrayants, mais le CSS (vu plus tard) va nous permettre d'y remédier.

Pour les listes ordonnées, l'attribut type permet de varier la numérotation. Par exemple, type="a" :

<ol type="a">
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>

va donner le résultat suivant :

  1. Élément 1
  2. Élément 2
  3. Élément 3

Les autres options sont type="A" :

  1. Élément 1
  2. Élément 2
  3. Élément 3

type="i" :

  1. Élément 1
  2. Élément 2
  3. Élément 3

et type="I" :

  1. Élément 1
  2. Élément 2
  3. Élément 3

Pour les listes ordonnées, l'attribut start permet aussi de spécifier le début de la numérotation (comme dans l'exemple ci-dessous).

Listes imbriquées

À noter que les deux sortes de listes peuvent être imbriquées. Le code :

<ol start="0">
  <li><h2>Introduction</h2>
  </li>
  <li><h2>Chapitre 1</h2>
    <ul>
      <li>Éléments et attributs
        <ol type="a">
          <li>Éléments</li>
          <li>Attributs</li>
        </ol>
      </li>
      <li>Titres et formatage du texte
        <ol type="a">
          <li>Titres</li>
          <li>Formatage</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>
    <h2>Chapitre 2</h2>
    <ul>
      <li>Insérer une photo ou une vidéo dans une page web
        <ol type="a">
          <li>Une photo</li>
          <li>Une vidéo</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

va générer un résultats similaire à :

  1. Introduction

  2. Chapitre 1

    • Éléments et attributs
      1. Éléments
      2. Attributs
    • Titres et formatage du texte
      1. Titres
      2. Formatage
  3. Chapitre 2

    • Insérer une photo ou une vidéo dans une page web
      1. Une photo
      2. Une vidéo

Les listes de définitions

Les listes de définitions sont un peu similaires à un tableau à deux colonnes où la première colonne contiendrait des termes à définir ou à décrire, alors que la deuxième contiendrait le texte de la définition ou de la description. Les balises pour déclarer une liste de définitions sont <dl></dl> (dl = « definition list ») ; les termes à définir sont encadrés par les balises <dt></dt> et le définitions par les balises <dd></dd>.

Voici côté à côté un exemple de code et le résultat :

<dl>
  <dt>Terme 1</dt>
  <dd>Ceci est la définition du terme 1.</dd>
  <dt>Terme 2</dt>
  <dd>Ceci est la définition du terme 2.</dd>
  <dt>Terme 3</dt>
  <dd>Ceci est la définition du terme 3.</dd>
</dl>

Terme 1
Ceci est la définition du terme 1.
Terme 2
Ceci est la définition du terme 2.
Terme 3
Ceci est la définition du terme 3.

Ici encore, la disposition et le formatage par défaut ne sont pas extraordinaires et il faudra faire appel à un peu de CSS.

Exercice

Pratiquez-vous avec des listes dans simulateur HTML. Essayez les différentes options. Créez des listes imbriquées.

Accueil