Les listes

HTML nous permet de disposer des collections d'objets sous une forme structurée appelée liste.

Les listes à puces

Les listes à puces sont utilisées lorsque l'ordre des éléments n'a pas d'importance.  Chaque item est alors précédé d'une même puce.  On utilise le conteneur <UL>...</UL>. et les marqueurs <LI>...</LI>.

Code HTML Affichage
Exemple de liste à puces:
<UL><LI>pomme<LI>orange</LI>
<LI>banane
</UL>
Exemple de liste à puces:
  • pomme
  • orange
  • banane
Avec des carrés:<UL type="square">
<LI>banane
<LI>orange
<LI>pomme
</UL>
Avec des carrés:
  • banane
  • orange
  • pomme
Avec des cercles: <UL type="circle">
<LI>raisin
<LI>tangerine
<LI>kiwi
</UL>
Avec des cercles:
  • raisin
  • tangerine
  • kiwi

On peut aussi produire des listes avec une image quelconque.  Nous le verrons dans une leçon ultérieure.

Les listes ordonnées

On peut aussi définir des listes dont les éléments sont numérotés à l'aide du conteneur <OL>...</OL>.

Code HTML Affichage
Exemple de liste numérotée:
<OL><LI>pomme<LI>orange</LI>
<LI>banane
</OL>
Exemple de liste numérotée:
  1. pomme
  2. orange
  3. banane
Avec des carrés:<OL start="9">
<LI>banane
<LI>orange
<LI>pomme
<LI value=15>cerise
<LI>bleuet
</OL>
Avec des carrés:
  1. banane
  2. orange
  3. pomme
  4. cerise
  5. bleuet
En chiffres romains: <OL type="I" start=10>
<LI>César
<LI>Marcus
<LI>Calligula
</OL>
En chiffres romains:
  1. César
  2. Marcus
  3. Calligula
Avec des lettres minuscules:
<OL type=a>
<LI>banane
<LI>orange
<LI>pomme
</OL>
Avec des lettres minuscules:
  1. banane
  2. orange
  3. pomme

Les listes de définitions

Les listes de définitions sont très utiles lorsqu'on désire présenter un glossaire.  On se servira du conteneur <DL>...</DL> et des balises <DT> et <DD>.

Code HTML Affichage
<DL>
<DT>pomme
<DD>fruit du pommier
<DT>banane</DT>
<DD>fruit du bananier
<DT>orange
<DD>fruit de l'oranger
</DL>
pomme
fruit du pommier
banane
fruit du bananier
orange
fruit de l'oranger

Imbrication des listes

Les listes peuvent facilement être imbriquées.

Code HTML Affichage
<DL>
<DT>pomme<DD>fruit du pommier
<DT>banane</DT>
<DD>fruit du bananier
<DT>orange<DD><OL>
<LI>fruit de l'oranger
<LI>couleur bien connue
</OL></DL>
pomme
fruit du pommier
banane
fruit du bananier
orange
  1. fruit de l'oranger
  2. couleur bien connue

Lectures suggérées