Les listes

Plusieurs sites vont utiliser différents types de représentation d'énumération, entre autres, une figure systématique particulièrement bien connue: les listes.
Il existe 3 types de listes en HTML.
  1. Listes à puces
  2. Listes numérotées
  3. Liste de définition.
Listes à puces
Il existe 3 types de listes à puces: les disques, les cercles et les carrées.
Elles sont programmées à la base par les balises <ul> et </ul> indiquant une liste à puces, mais tout juste à l'intérieur de celles-ci, nous retrouvons <li> ainsi que </li> indiquant chaque élément de la liste.

Par exemple: <ul><li>Texte 1</li><li>Texte 2</li><li>Texte 3</li></ul>
Qui donnerait:
  • Texte 1
  • Texte 2
  • Texte 3
Dans le précédent exemple, nous trouvons le type de puce par défaut: les disques.
Pour changer la puce nous devons ajouter l'attribut «type» équivalant à disc, circle ou square.

Par exemple: <ul type=square><li>Texte 1</li><li>Texte 2</li><li>Texte 3</li></ul>
Qui donnerait:
  • Texte 1
  • Texte 2
  • Texte 3
Nous pouvons aussi mettre une puce différente à chaque énoncé en mettant l'attribut «type» dans la balise des éléments (<li>)

Par exemple: <ul><li type=disc>Texte 1</li><li type=square>Texte 2</li><li type=circle>Texte 3</li></ul>
Qui donnerait:
  • Texte 1
  • Texte 2
  • Texte 3
Listes numérotées
Il existe 5 types de listes numérotées: i, ii, iii, iv... I, II, III, IV,... A, B, C,... a, b, c,... 1, 2, 3,...
Elles sont programmées à la base par les balises <ol> et </li> indiquant une liste à puces, mais tout juste à l'intérieur de celles-ci, telle que les précédentes, nous retrouvons <li> ainsi que </li> indiquant chaque élément de la liste.

Par exemple: <ol><li>Texte 1</li><li>Texte 2</li><li>Texte 3</li><li>Texte 4</li><li>Texte 5</li></ol>
Qui donnerait:
  1. Texte 1
  2. Texte 2
  3. Texte 3
  4. Texte 4
  5. Texte 5
Dans le précédent exemple, nous trouvons le type de puce par défaut: les nombres
Pour changer la numérotation nous devons ajouter l'attribut «type» équivalant à i, I, a ou A


Par exemple: <ol type=i><li>Texte 1</li><li>Texte 2</li><li>Texte 3</li><li>Texte 4</li><li>Texte 5</li></ol>
Qui donnerait:
  1. Texte 1
  2. Texte 2
  3. Texte 3
  4. Texte 4
  5. Texte 5
Nous pouvons aussi mettre une numérotation différente à chaque énoncé en mettant l'attribut «type» dans la balise des éléments (<li>)

Par exemple: <ol><li>Texte 1</li><li type=i>Texte 2</li><li type=I>Texte 3</li><li type=a>Texte 4</li><li type=A>Texte 5</li></ol>
Qui donnerait:
  1. Texte 1
  2. Texte 2
  3. Texte 3
  4. Texte 4
  5. Texte 5
Liste de définition
La liste de définition consiste à imbriquer une liste dans une liste. Dans ce type, il est possible de ne pas contenir de numérotation ou de puce. Les balises <dl> suivit de </dl> introduit puis finit la liste de définition. <dt> ajouté à </dt> délimite le terme à définir. Finalement, <dd> en plus de </dd> donne la définition du terme.

Par exemple: <dl><dt>Le terme</dt><dd>La définition</dd><dd>La définition 2</dd><dt>Le terme 2</dt><dd>La définition</dd></dl>
Qui donnerait:

Le terme

La définition
La définition 2
Le terme 2
La définition


Il est aussi possible d'utiliser les puces ou les numérotations pour former des listes de listes.

Par exemple: <ol><li><ul><li>texte 1</li><li>texte 1,2</li></ul></li><li><ul><li>texte 2</li><li>texte 2,2</li></ul></li></ol>
Qui donnerait:
    • texte 1
    • texte 1,2
    • texte 2
    • texte 2,2