Les listes en XHTML

Noter ce cours :

Liens sponsorisés :

Les listes

Les listes sont quasiment toujours présentes avec les nouveaux sites codés en XHTML strict. En effet, on les utilise très souvent pour créer des menus. Vous n'en avez peut-être pas conscience, mais le menu que vous voyez à gauche de ce site est une liste, décorée avec des CSS. Ne soyez donc pas rebuté si je vous parle aussi de menus dans ce chapitre, vous verrez qu'il est bien plus judicieux de créer des menus avec des listes qu'en utilisant des <br /> pour sauter des lignes. Les listes permettent d'être mieux compris par ceux qui utilisent des navigateurs spéciaux, et le rendu est identique sur les navigateurs graphiques. Vous n'avez donc rien à craindre à les utiliser. Nous allons voir maintenant quels sont les trois types de listes existants :

Les listes à puces non ordonnées

Les listes à puces non ordonnées sont majoritairement utilisées dans les sites web. Voici un exemple de liste à puces (non mise en forme) :

Le nombre d'éléments que vous pouvez mettre est illimité. Voici le code XHTML correspondant à l'exemple ci-dessus :

<ul>
     <
li>
Element 1</li>
     <
li>
Element 2</li>
     <
li>
Element 3</li>
</
ul>

Comme vous pouvez le voir, on débute la liste par la balise <ul> chaque élément est entouré de balises <li>, et on ferme ensuite la liste avec </ul>. Sachez que vous ne pouvez rien mettre comme texte ou balises en dehors des balises <li>. Je ne veux donc pas voir ça :

<ul>
     <strong><
li>
Element 1</li></strong>
     <
li>
Element 2</li>
     <
li>
Element 3</li>
</
ul>

Ni ça :

<ul>
     Titre de ma liste
     <
li>
Element 1</li></strong>
     <
li>
Element 2</li>
     <
li>
Element 3</li>
</
ul>

Ces deux exemples à ne pas faire s'appliquent également aux autres types de listes, dont nous allons parler tout de suite :p

La liste à puces ordonnée

Elle diffère de la précédente par le fait qu'on ajoute des numéros aux puces. Il y a donc une notion d'ordre, pas forcément obligatoire dans les faits que vous allez énumérer, mais utile lorsque vous allez décrire des étapes. Cette liste diffère uniquement de la précédente par le fait que vous utiliserez cette fois la balise <ol> et non <ul> pour débuter la liste. Les éléments seront toujours matérialisés par des balises <li>.

Voici un exemple :

<p>Montage d'une carte graphique :</p>
<
ol>
     <
li>
On ouvre le boîtier</li>
     <
li>
On enlève l'ancienne carte graphique</li>
     <
li>
On referme le boîtier et on démarre le PC</li>
     <
li>
On installe les pilotes</li>
</
ol>

Et voici ce que ça donne :

Montage d'une carte graphique :

  1. On ouvre le boîtier
  2. On enlève l'ancienne carte graphique
  3. On referme le boîtier et on démarre le PC
  4. On installe les pilotes

Vous voyez, ce n'est pas compliqué, tout du moins pas pour l'instant. Rassurez-vous, ça ne va pas l'être beaucoup plus avec les listes de définitions que nous allons voir maintenant.

Les listes de définitions

Comme leur nom l'indique, les listes de définitions sont principalement utilisées pour lister des mots ainsi que leurs définitions associées. Elles peuvent toutefois avoir d'autres usages toujours grâce aux CSS, et il est possible de les employer dans des menus. Il y a quelques éléments qui changent par rapport aux deux autres listes que nous venons de voir :

Tout d'abord, pour débuter une liste de définitions, on utilise la balise <dl>. Ensuite, pour dire qu'on va définir un mot, on utilise la balise <dt>. Pour enfin apporter la ou les définitions du mot, on utilise la balise <dd>. Voici un exemple qui va vous permettre de mieux comprendre :

<dl>
     <
dt>
Boîtier</dt>
          <
dd>
Définition 1</dd>
          <
dd>
Définition 2</dd>
     <
dt>
Vulgarisation informatique</dt>
          <dd>
Rendre l'informatique accessible au plus grand nombre</dd>
</
dl>

Et voici ce que ça donne :

Boîtier
Définition 1
Définition 2
Vulgarisation informatique
Rendre l'informatique accessible au plus grand nombre

Comme vous pouvez le voir, les définitions sont en retrait, et tout est moche ! Ne vous en faites pas, vous pourrez modifier tout ça à l'aide des CSS, encore un peu de patience, une fois que vous aurez lu tout le cours sur le XHTML, vous comprendrez très facilement les CSS. Il est important de souligner que les balises <ul>, <ol> et <dl> sont des balises de type block, vous ne devez donc pas les mettre dans des paragraphes. Vous pouvez cependant les mettre dans des <div> qui sont des conteneurs génériques, comme nous l'avons vu au chapitre précédent.

Chapitre suivant

Les tableaux

Vous avez aimé cet article intitulé Les listes en XHTML ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels