HTML5 - Organiser son titre "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 :

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

Pages

vendredi 27 septembre 2013