Retour à la page d'accueil

Créer et imbriquer des listes

Auteur: Jérôme Forget. Publié le 4 décembre 2006.

Lorsqu'il convient d'organiser de l'information sous forme de liste d'éléments, XHTML offre trois possibilités:

  1. les listes numérotées;
  2. les listes non-numérotées;
  3. les listes de définitions.

Listes non-numérotées

Ce sont les listes à puces traditionnelles. Les balises <ul> et </ul> (pour unordered list) marquent le début et la fin d'une liste, <li> et </li> indiquent chacun des éléments de la liste.

<ul title="Les armes de Goldorak"> <li>mégavolt</li> <li>cornofulgure</li> <li>astéro-hache</li> <li>astéro-poing</li> </ul>

Les listes non-numérotées sont généralement utilisées pour 

Listes numérotées

Ce sont des listes où tous les éléments sont numérotés automatiquement. Les balises <ol> et </ol> (pour ordered list) marquent le début et la fin d'une liste, <li> et </li> indiquent chacun des éléments de la liste.

<ol title="Les armes de Goldorak"> <li>mégavolt</li> <li>cornofulgure</li> <li>astéro-hache</li> <li>astéro-poing</li> </ol>

Les listes numérotées sont utilisées pour :

Listes de définitions

On utilise les balises <dl> et </dl> (pour definition list). À l'intérieur de l'élément <dl>, <dt> (pour definition term) est une entrée du lexique, et <dd> (pour definition definition) la définition associée à cette entrée.

<dl> <dt>sémantique</dt> <dd>Ensemble des relations entre les caractères, ou groupes de caractères, et leur signification, indépendamment de la façon de les employer ou de les interpréter.</dd> <dt>métadonnée</dt> <dd>Donnée qui renseigne sur la nature de certaines autres données et qui permet ainsi leur utilisation pertinente.</dd> </dl>

Les listes de définition sont utilisées pour :

Listes imbriquées

Il est possible d'imbriquer ces listes pour créer des listes plus complexes. En voici un exemple, intégrant des listes numérotées et non-numérotées. :

<ol> <li>premier élément <ul> <li>premier sous-élément</li> <li>second sous-élément</li> </ul> </li> <li>second élément <ul> <li>premier sous-élément</li> <li>second sous-élément</li> </ul> </li> </ol>
À propos | Formation | Ressources | Exercices
© 2004-2007, Jérôme Forget (ajouter au carnet d'adresses). Certains droits réservés.
Sous licence Creative Commons «Paternité - Partage des Conditions Initiales à l'Identique 2.0 Canada».
 Photos : stock.xchngPolitique de confidentialitéDéclaration qualité. Valide: XHTML | CSS.