Les listes

Parent Previous Next


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 :

Liste non ordonnée



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

Code : HTML 

<ul></ul>



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 :

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 me lève.</li>

   <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