Cours HTML N°3 : listes d'éléments

 
Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non numérotées.

Les listes numérotées

Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>.

Exemple :

<OL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</OL>

Ce qui donne à l'écran :

1. élément 1,
2. élément 2,
3. élément 3.

Les listes à puces

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL> et </UL>.

Exemple :

<UL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient cette fois :

• élément 1,
• élément 2,
• élément 3.

Notez qu'il est possible d'imbriquer des listes du même type ou de types différents.

Exemple :

<UL>
<LI>élément 1 :
    <OL>
    <LI>sous-élément A,
    <LI>sous-élément B.
    </OL>
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient alors :

• élément 1,
1. sous-élément A,
2. sous-élément B.
• élément 2,
• élément 3.

Liste de tabulations

Enfin, il est possible de définir des listes spéciales, permettant de faire des glossaires, en utilisant les balises <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un élément et <DD> pour indiquer sa définition.

Exemple :

<DL>
<DT>HTML<DD>HyperText Markup Language
<DT>HTTP<DD>HyperText Transfert Protocol
</DL>

Donne :

HTML

HyperText Markup Language

HTTP

HyperText Transfert Protocol

Les attributs

Type="type"	UL & OL	(déprécié en faveur des css) : spécifie l'aspect des marqueurs des éléments
Start="nombre"	OL	commence la numérotation à la valeur spécifiée.
Value="nombre"	LI	spécifie le nombre de l'élément.
Compact	OL & UL	rendu plus compact de la liste

Le type des listes :

<UL type="disc ">	Puces rondes pleine
<UL type="circle">	Puces rondes creuses
<UL type="square">	Puces carrées
<OL type=1>	(1,2,3)
<OL type=a>	(a,b,c)
<OL type=A>	(A,B,C)
<OL type=i>	(i,ii,iii)
<OL type=I>	(I,II,III)