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 :
<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 :
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>Le résultat se trouve à la figure suivante.
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.
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.
Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple (résultat à la figure suivante) :
<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>
Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc la balise <ol>.
En résumé
Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.
Les paragraphes sont définis par la balise
<p> </p>et les sauts de ligne par la balise<br />.Il existe six niveaux de titre, de
<h1> </h1>à<h6> </h6>, à utiliser selon l'importance du titre.On peut mettre en valeur certains mots avec les balises
<strong>,<em>et<mark>.Pour créer des listes, on doit utiliser la balise
<ul>(liste à puces, non ordonnée) ou<ol>(liste ordonnée). À l'intérieur, on insère les éléments avec une balise<li>pour chaque item.
