Les Listes
Enumérations
Les balises
Deux balises sont nécessaires une pour une énumération :
- Le balise <ul> : unordered list
- La balise <li> : list item
La structure
<ul>
<li> element 1 </li>
<li> element 2 </li>
...
<li> element N </li>
</ul>
affichera :
- element 1
- element 2
- ...
- element N
Listes numérotées
Les balises
Deux balises sont nécessaires pour une liste numérotée:
- Le balise <ol> : ordered list
- La balise <li> : list item
La structure
<ol>
<li> element 1 </li>
<li> element 2 </li>
...
<li> element N </li>
</ol>
affichera :
- element 1
- element 2
- ...
- element N
Listes de définitions
Les balises
Trois balises sont nécessaires :
- Le balise <dl> : definition list
- La balise <dt> : definition term
- La balise <dd> : definition definition
La structure
<dl>
<dt> terme 1 </dt>
<dd> definition 1 </dd>
<dt> terme 2 </dt>
<dd> definition 2 </dd>
<dt> terme final </dt>
<dd> definition finale </dd>
</dl>
affichera :
- terme 1
- definition 1
- terme 2
- definition 2
- terme final
- definition finale
Bien qu'il soit naturel d'alterner termes et définitions, l'ordre des balises <dt> et <dd> n'est pas réglementé.
Contenu
Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>. La balise <dl> ne peut contenir que des éléments <dt> ou <dd>.
Chaque élément <li> ou <dd> peut contenir des
éléments de bloc ou des éléments incorporés.
Les listes peuvent s'imbriquer. Par contre la balise <dt> ne peut contenir que du texte éventuellement mis en forme à l'aide de
balises incorporées.
Exemple :
<ul>
<li><h4>un titre</h4></li>
<li><p>un paragraphe</p></li>
<li><p>énumération</p>
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</li>
<li><p>liste numérotée</p>
<ol>
<li type="I">element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
</li>
<li><p>liste de définitions</p>
<dl>
<dt> terme 1 </dt>
<dd> definition 1 </dd>
<dt> terme 2</dt>
<dd> definition 2</dd>
<dt> terme final</dt>
<dd> definition finale</dd>
</dl>
</li>
</ul>
affichera :
-
un titre
un paragraphe
énumération
- element 1
- element 2
- element 3
liste numérotée
- element 1
- element 2
- element 3
liste de définitions
- terme 1
- definition 1
- terme 2
- definition 2
- terme final
- definition finale
Les attributs
Type
Permet de définir le type de puce pour les énumérations, le type de numérotation pour les listes numérotées. Il peut être
utilisé avec les balises <ul> et <ol> s'appliquant ainsi à l'ensemble de la liste, ou à la balise <li> pour un élément particulier.
<p>Enumération</p>
<ul>
<li>puce par défaut</li>
<li type="disc">disc</li>
<li type="circle">circle</li>
<li type="square">square</li>
</ul>
<p>Liste numérotée</p>
<ol type="A">
<li>element 1</li>
<li>element 2</li>
<li type="a">element 3</li>
<li type="i">element 4</li>
<li type="I">element 5</li>
<li type="1">element 6</li>
</ol>
Enumération
- puce par défaut
- disc
- circle
- square
Liste numérotée
- element 1
- element 2
- element 3
- element 4
- element 5
- element 6
Start et value
L'attribut start
définit dans la balise <ol> permet de donner la valeur initiale de la numérotation. Dans la balise <li> c'est l'attribut value qui permet de réinitialiser
la valeur
<p>Liste numérotée</p>
<ol start="5">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li value="1">element 4</li>
<li>element 5</li>
<li value="6">element 6</li>
</ol>
Liste numérotée
element 1
element 2
element 3
element 4
element 5
element 6
Ces attributs sont en cours d'abandon et sont avantageusement remplaçés par des propriétés
CSS.
Liste de Menu
En cours d'abandon, similaire aux énumérations
