Les listes

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
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 ou encore énumérations.

Liste non ordonnée

Une liste non ordonnée ressemble à ceci :

Fraises
Framboises
Cerises

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>.
Commencez donc à taper ceci :

Code : HTML

Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre deux balises <li></li>. Chacune de ces balises doit se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :

Code : HTML

<ul>

<li>Fraises</li>

<li>Framboises</li>

<li>Cerises</li>

</ul>

Le résultat se trouve à la figure suivante.

Une liste non ordonnée

Notez que la liste doit être placée à l'intérieur de <body></body>. À partir de maintenant, je ne mets pas tout le code de la page pour rester lisible.

Retenez donc ces deux balises :

<ul></ul> délimite toute la liste ;
<li></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.

Et voilà, vous savez créer une liste à puces ! Pas si dur une fois qu'on a compris comment imbriquer les balises.

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></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.

Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer <ul></ul> par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter les éléments.

L'ordre dans lequel vous placez les éléments de la liste est important. Le premier <li></li> sera l'élément n° 1, le second sera le n°2 etc…

Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple (résultat à la figure suivante) :

Code : HTML

<h1>Ma journée</h1>

<ol>

<li>Je mange et je bois.</li>

<li>Je retourne me coucher.</li>

</ol>

Une liste ordonnée

Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc la balise <ol>.

Pour information, il existe un troisième type de liste, beaucoup plus rare : la liste de définitions. Elle fait intervenir les balises <dl> (pour délimiter la liste), <dt> (pour délimiter un terme) et <dd> (pour délimiter la définition de ce terme).

Créé avec HelpNDoc Personal Edition: Générateur de documentation d'aide HTML gratuit