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.
- Listes à puces
- Listes numérotées
- 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:
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>
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:
- Texte 1
- Texte 2
- Texte 3
- Texte 4
- 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>
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:
- Texte 1
- Texte 2
- Texte 3
- Texte 4
- 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:
- Texte 1
- Texte 2
- Texte 3
- Texte 4
- 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 termeIl 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