- Fraises
- Framboises
- Cerises
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Cela nous permet de créer un menu.
Nous allons découvrir ici deux types de listes :
- les listes non ordonnées ou listes à puces ;
- les listes ordonnées ou listes numérotées.
Une liste non ordonnée ressemble à ceci :
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre.
Il n'y a pas de "premier" ni de "dernier".
Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec </ul>.
Cela s’écrit :
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
Une liste ordonnée ressemble à ceci :
C'est un système qui nous permet de créer une liste d'éléments avec notion d'ordre.
Il y a un "premier" et un "dernier".
Créer une liste ordonnée est très simple. Il suffit d'utiliser la balise <ol> que l'on referme un peu plus loin avec </ol>.
Cela s’écrit :
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
Notez que la liste doit être placée à l'intérieur de <body> et </body> sans autres éléments.
À partir de maintenant, je ne mets pas tout le code de la page pour rester lisible.
Retenez donc ces deux balises :
• <ul> et <ol> délimite toute la liste ;
• <li> et </li> délimite un élément de la liste (une puce).
Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limités à trois éléments.
Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces
(créer une liste à puces dans une liste à puces).
Si vous voulez faire ça, ouvrez une seconde balise <ul> à l'intérieur d'un élément <li> et </li>.
Si vous fermez les balises dans le bon ordre, vous n'aurez pas de problème.
Attention néanmoins, cette technique est un peu compliquée à maîtriser.
Pour information, il existe un troisième type de liste, beaucoup plus rare : la liste de définitions.
Elle fait intervenir les balises <d1> (pour délimiter la liste), <dt> (pour délimiter un terme) et <dd> (pour délimiter la définition de ce terme).