Les listes - Cours XHTML

Introduction

Info

Il est possible en XHTML de faire des listes ordonnées ou non ordonnées.

Liste non ordonnée

Info

La liste non ordonnée ou liste à puce est composée de 2 balises XHTML UL et LI.

La balise UL va déterminer le début et la fin de la liste :
Exemple de code :
<ul>
//La liste
</ul>

La balise LI va déterminer chaque élément de la liste :
Exemple de code :
<ul>
  <li> Element 1</li>
  <li> Element 2</li>
</ul>
Ce qui donne :
  • Element 1
  • Element 2

Pour plus d'information sur la balise XHTML UL et la balise XHTML LI, utilisez le glossaire XHTML.

Liste ordonnée

Info

La liste non ordonnée ou liste à puce est composée de 2 balises XHTML OL et LI.

La balise OL va déterminer le début et la fin de la liste :
Exemple de code :
<ol>
//La liste
</ol>

La balise LI va déterminer chaque élément de la liste :
Exemple de code :
<ol>
  <li> Element 1</li>
  <li> Element 2</li>
</ol>
Ce qui donne :
  1. Element 1
  2. Element 2

Pour plus d'information sur la balise XHTML OL et la balise XHTML LI, utilisez le glossaire XHTML.

Changer le type de puce

Info

Vous pouvez changer le type de puce, grâce la la feuille de style list-style-type.

Par exemple :
Exemple de code :
<ol>
  <li style="list-style-type:upper-alpha">
    Element 1
  </li>
  <li style="list-style-type:upper-roman">
    Element 2
  </li>
</ol>
Ce qui donne :
  1. Element 1
  2. Element 2
Par exemple :
Exemple de code :
<ul>
  <li style="list-style-type:circle">
    Element 1
  </li>
  <li style="list-style-type:square">
    Element 2
  </li>
</ul>
Ce qui donne :
  • Element 1
  • Element 2

En savoir plus sur list-style-type

Transformer une balise en liste

Info

Vous pouvez transformer une balise en un élément de liste grâce à la proprété css display:
Exemple de code :
<div style="display:list-item; list-style-type:upper-roman">
    Element 1
</div>
<div style=" display:list-item; list-style-type:square">
    Element 2
</div>
Ce qui donne :
Element 1
Element 2

Remarquez qu'il n'y a pas de puce. Pour cela il faut ajouter une marge gauche de 15 à 20px;
Exemple de code :

<div style="margin-left:20px;">
<div style=" display:list-item; list-style-type:upper-roman">
    Element 1
</div>
<div style=" display:list-item; list-style-type:square">
    Element 2
</div>
</div>
Ce qui donne :
Element 1
Element 2
Chapitre le texte
Chapitre les images
La balise HTML et XHTML UL contient tous les éléments de la liste puce non ordonnée.<UL> </UL> Chaque élément de la liste est précédé par la balise HT...[Voir]La balise HTML et XHTML LI correspond à une ligne d'une liste non ordonnée ou ordonnée.<LI> Exemple : Non ordonnée :<UL> <LI>Liste 1 <LI>Liste 2 </U...[Voir]La balise HTML et XHTML OL contient tous les éléments de la liste ordonnée.<OL> </OL>Chaque élément de la liste est précédé par la balise HTML et XHTM...[Voir]La propriété de Listes CSS LIST-STYLE-TYPE permet de spécifier le type du marqueur d'item de liste à utiliser. Les types de marqueurs d'item sont clas...[Voir]La propriété CSS DISPLAY permet de modifier le type de rendu d'un élément.Exemple d'écriture CSS de DISPLAY display : block; DISPLAY : inline; display...[Voir]