Les listes

Dans la vie, il y a 2 sortes de listes : celles dont l'ordre n'est pas important et celles dont l'ordre est important.

Ainsi, il serait ridicule de suivre l'ordre d'une liste d'épicerie lorsque l'on fait ses emplettes, mais il est primordial d'ajouter le lait et les oeufs AVANT de mettre le gâteau au four.

Il en va de même pour les listes HTML : certaines sont des listes numérotées (ordered lists) et certaines sont des listes à puces (unordered lists).

Habituellement, les éléments d'un liste numérotée sont précédés d'une forme de numérotation (chiffre, lettre, chiffre romain…) et les éléments d'une liste à puces sont précédés d'une puce (carré, cercle ou autre image). Mais on peut très bien en décider autrement. ₍₁₎ ₍₂₎

Exemples de listes

Ma recette de crêpes

Ingrédients

1 tasse de farine
1 c. à thé de sel
2 c. à soupe de sucre
2 oeufs
3 c. à soupe d'huile
1 c. à thé de vanille
1 tasse de lait

Préparation

Mélanger la farine, le sel et le sucre dans un grand bol.
Dans un autre bol, fouetter les oeufs et incorporer graduellement l'huile.
Ajouter la vanille et le lait.
Incorporer le liquide aux ingrédients solides.
Ajuster la texture du mélange au besoin en ajoutant du lait.
Faire cuire dans une poële chaude à coup d'un tiers de tasse environ.

Télécharger cet exemple

Les balises d'une liste

Pour ajouter une liste à notre page, nous devons utiliser 2 balises différentes : une balise représentant la liste au complet et une balise pour chaque élément de la liste.

Balise	Signification	Utilisation
`ol`	Ordered list	Pour définir une liste numérotée
`ul`	Unordered list	Pour définir une liste à puces
`li`	List item	Pour définir un élément de liste (peu importe le type de liste)

Exemple

ul

liFarine/li

liLait/li

…

/ul

ol

liMettre…/li

liBrasser…/li

…

/ol

Les attributs (d'une liste)

Pour la liste (`ol` ou `ul`)

start=un_nombre: Modifie le numéro de départ d'une liste ordonnée.; Valeur possible : un nombre entier.
reversed=reversed: Modifie l'ordre d'affichage de la liste.; Valeur possible : reversed.

Par exemple, ol start=23 reversed=reversed…/ol affichera une liste inversée débutant à 23. 23… 22… 21…

Pour une élément de liste (`li`)

value=un_nombre: Modifie le numéro d'un élément spécifique et continue la numérotation à partir de ce point.; Valeur possible : un nombre entier.; Exemple : li value=16…/li

Imbrication de listes

Il est possible et souvent souhaitable d'imbriquer des listes l'une dans l'autre. Autrement dit, de faire des sous-listes dans une liste.

Ingrédients Farine Lait Beurre Oeufs Huile Instructions Préchauffer le four à 350° F Mettre la farine dans un bol Ajouter le beurre et le lait Bien mélanger Mettre au four	Il est alors important de prendre conscience que, par exemple, la liste des ingrédients fait partie de l'élément «Ingrédients» et que la liste des instructions fait partie de l'élément «Instructions». Elles devront donc être placées à l'intérieur de leurs `li` respectifs.
	BON `ul` `li`Ingrédients `ul`…`/ul` `/li` `/ul`	MAUVAIS `ul` `li`Ingrédients`/li` `ul`…`/ul` `/ul`

Pour les menus

La structure des listes est idéale pour la confection de menus pour notre site web.

En effet, l'imbrication naturelle des listes permet la création d'une hiérarchie de menus et de sous menus. En ajoutant un peu de CSS, on obtient un menu pleinement esthétique et fonctionnel.

ul
  lia href="#"Musique/a
    ul
      lia href="#"Country/a/li
      lia href="#"Classique/a/li
      lia href="#"Speed Métal/a/li
    /ul
  /li
  lia href="#"Films/a
    ul
      lia href="#"Romantiques/a/li
      lia href="#"Horreur/a/li
      lia href="#"Documentaires/a/li
    /ul
  /li
  lia href="#"Livres/a
    ul
      lia href="#"Policier/a/li
      lia href="#"Cuisine/a/li
      lia href="#"Astrologie/a/li
    /ul
  /li
/ul