Afficher une Liste

Les listes sont très faciles à créer en HTML. Vous pouvez les utiliser dans une table des matières, pour faciliter la navigation dans votre site Web ou pour afficher un texte clair et concis. Le langage HTML offre diverses listes, comme les listes à puces, les listes numérotées et les listes de définition. Par ailleurs, à l'intérieur de vos listes, vous pouvez insérer paragraphes, images, liens et même d'autres listes.

Les Listes à Puces

Les listes à puces sont définies par la balise <ul>, chaque article de la liste étant inséré à l'aide de la balise <li>. N'oubliez pas de bien fermer vos balises ou bien votre liste peut sombrer dans un chaos indescriptible. Voici un exemple simple de liste à puces :

<ul>
<li>Faire la vaisselle</li>
<li>Faire les courses au marché</li>
</ul>

  • Faire la vaisselle
  • Faire les courses au marché

Les Listes Numérotées

La seule différence entre une liste à puces et une liste numérotée est l'utilisation de la balise <ol> à la place de la balise <ul> :

<ol>
<li>Article 1</li>
<li>Article 2</li>
</ol>

  1. Article 1
  2. Article 2

Les Listes de Définition

Une liste de définition est une liste de termes et de définitions correspondantes qui s'obtient avec la balise <dl>. À l'intérieur de cette balise, les termes sont représentés par la balise <dt> et les définitions par <dd>. En voici un exemple :

<dl>
<dt>Expression 1</dt>
<dd>D&eacute;finition de l'expression 1</dd>
<dt>Expression 2</dt>
<dd>D&eacute;finition de l'expression 2</dd>
</dl>

Expression 1
Définition de l'expression 1
Expression 2
Définition de l'expression 2

De nombreuses tables des matières sont en fait des listes de définition imbriquées les unes dans les autres comme suit :

<dl>
<dt>Chapitre 1</dt>
<dt>Chapitre 2</dt>
<dd>
<dl>
<dt>Chapitre 2 - Partie 1</dt>
<dt>Chapitre 2 - Partie 2</dt>
</dl>
</dd>
<dt>Chapitre 3</dt>
</dl>

Chapitre 1
Chapitre 2
Chapitre 2 - Partie 1
Chapitre 2 - Partie 2
Chapitre 3