10 Listes

10.1 Introduction aux listes

• Des informations non-ordonnées.
• Des informations ordonnées.
• Des définitions.

La liste ci-dessus, par exemple, est une liste non-ordonné, créée avec l'élément UL

<UL>
<LI>Information non-ordonnée.
<LI>Information ordonnée.
<LI>Définition.
</UL>

Une liste ordonnée, créée en utilisant l'élément OL, devrait contenir des informations dont l'ordre est important, comme par exemple dans une recette de cuisine:

1. Bien mélanger les ingrédients solides.
2. Verser les ingrédients liquides.
3. Mélanger pendant 10 minutes.
4. Cuire au four à 300 degrés pendant une heure.

Les listes de définitions, créées en utilisant l'élément DL, contiennent généralement une série de couples terme/définition (bien qu'elles puissent avoir d'autres applications). Par exemple, une liste de définitions peut-être utilisée dans le cadre de la promotion d'un produit:

Coût réduit

La nouvelle version de ce produit coûte beaucoup moins cher que la précédente!

Plus facile d'utilisation

Nous avons rendu le produit plus simple à utiliser!

Sans danger pour les enfants

Vous pouvez laisser vos enfants seuls dans une pièce avec le produit sans qu'ils ne se blessent (ce n'est pas une garantie).

Code HTML correspondant:

<DL>
<DT><STRONG>Coût réduit</STRONG>
<DD>La nouvelle version de ce produit coûte beaucoup moins cher que la précédente!
<DT><STRONG>Plus facile d'utilisation</STRONG>
<DD>Nous avons rendu le produit plus simple à utiliser!
<DT><STRONG>Sans danger pour les enfants</STRONG>
<DD>Vous pouvez laisser vos enfants seuls dans une pièce avec le produit sans qu'ils ne se blessent (ce n'est pas une garantie).
</DL>

Les listes peuvent également être contenues dans d'autres listes, et différents types de listes peuvent être combinés. C'est le cas dans l'exemple suivant, qui est une liste de définitions contenant une liste non-ordonnée (les ingrédients) et une liste ordonné (la méthode):

Les ingrédients:

• 100 grammes de farine
• 10 grammes de sucre
• 1 verre d'eau
• 2 oeufs
• sel, poivre

La méthode:

1. Bien mélanger les ingrédients.
2. Verser les ingrédients liquides.
3. Mélanger pendant 10 minutes.
4. Cuire au four à 300 degrés pendant une heure.

Remarque:

La recette peut-être améliorée en ajoutant des raisins.

La présentation exacte des trois sortes de listes dépend du client Web utilisé. Nous décourageons les auteurs d'utiliser les listes à seule fin d'indenter du texte. Ceci peut être obtenu en utilisant les feuilles de style.

10.2 Listes non-ordonnées (UL), listes ordonnées (OL), et éléments de listes (LI)

<!ELEMENT UL - - (LI)+                 --  liste non-ordonnée  -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- liste ordonnée  -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marqueur de début: obligatoire, Marqueur de fin: obligatoire

<!ELEMENT LI - O (%flow;)*             -- membre d'une liste -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marqueur de début: obligatoire, Marqueur de fin: facultatif

Les listes peuvent également être contenues les unes dans les autres:

<UL>
     <LI> ... Niveau un, numéro un...
     <OL>
        <LI> ...  Niveau deux, numéro un...
        <LI> ...  Niveau deux, numéro deux...
        <OL start="10">
           <LI> ...  Niveau trois, numéro un...
        </OL>
        <LI> ...  Niveau deux, numéro trois...
     </OL>
     <LI> ... Niveau un, numéro deux...
</UL>

<ol>
<li value="30"> fait de cet élément le numéro 30.
<li value="40"> fait de cet élément le numéro 40.
<li> fait de cet élément le numéro 41.
</ol>

10.3 Listes de définitions: les éléments DL, DT, et DD

<!-- listes de définitions - DT pour le terme, DD pour sa définition -->

<!ELEMENT DL - - (DT|DD)+              -- listes de définitions -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --  >

Marqueur de début: obligatoire, Marqueur de fin: obligatoire

<!ELEMENT DT - O (%inline;)*           -- definition term -->
<!ELEMENT DD - O (%flow;)*             -- definition description -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --  >

Marqueur de début: obligatoire, Marqueur de fin: facultatif

Les listes ordonnées et non-ordonnées ont la même apparence, à l'exception de la numérotation des éléments des listes ordonnées par les clients Web. La présentation exacte des numéros dépend du client lui-même. Les éléments de listes non-ordonnées ne sont pas numérotés.

Les deux types de listes sont constitués de séries d'éléments de listes définis par l'élément LI (dont le marqueur de fin peut être omis).

<UL>
   <LI> ... premier élément de la liste...
   <LI> ... deuxième élément de la liste...
   ...
</UL>

Les listes peuvent également être contenues les unes dans les autres:

<UL>
     <LI> ... Niveau un, numéro un...
     <OL>
        <LI> ...  Niveau deux, numéro un...
        <LI> ...  Niveau deux, numéro deux...
        <OL start="10">
           <LI> ...  Niveau trois, numéro un...
        </OL>
        <LI> ...  Niveau deux, numéro trois...
     </OL>
     <LI> ... Niveau un, numéro deux...
</UL>

<ol>
<li value="30"> fait de cet élément le numéro 30.
<li value="40"> fait de cet élément le numéro 40.
<li> fait de cet élément le numéro 41.
</ol>

10.3 Listes de définitions: les éléments DL, DT, et DD

<!-- listes de définitions - DT pour le terme, DD pour sa définition -->

<!ELEMENT DL - - (DT|DD)+              -- listes de définitions -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marqueur de début: obligatoire, Marqueur de fin: obligatoire

<!ELEMENT DT - O (%inline;)*           -- terme de la définition -->
<!ELEMENT DD - O (%flow;)*             -- description de la définition -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marqueur de début: obligatoire, Marqueur de fin: facultatif

Les listes de définitions varient des autres listes en ce que chacun de leurs éléments se constitue de deux parties: un terme et une description. Le terme est donné par l'élément DTet est limité au contenu "inline". La description est donnée avec l'élément DD qui est constitué de contenu au niveau du paragraphe.

<DL>
  <DT>Dweeb
  <DD>personne jeune et excitable qui risque de  devenir un
 <EM>Nerd</EM> ou un <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker sur le Net

  <DT>Nerd
  <DD>mâle tellement occupé sur le Net qu'il en oublie l'anniversaire de sa femme
</DL>

<DL>
   <DT>Centre
   <DT>Centre
   <DD> Un point équidistant de tous les points sur la surface d'une sphere.

   <DD> Dans certains sports collectifs, le joueur qui se trouve en milieu de terrain.

</DL>

Une autre application de DL, par exemple, est le marquage de dialogues, chaque DT nommant un interlocuteur, et chaque DD contenant ses paroles.

10.3.1 Apparence des listes

Les clients Web indentent généralement les listes contenues les unes dans les autres en fonction du niveau courant.

Pour OL et UL, l'attribut type définit des options d'affichage pour les clients Web.

Concernant l'élément UL, de possibles valeurs pour l'attribut type sont disc, square, et circle. La valeur par défaut dépend du niveau d'imbrication de la liste courante. Ces valeurs peuvent être indifféremment écrites en majuscules ou en minuscules.

La manière dont chaque valeur est présentée dépend du client Web. Les clients Web devraient représenter un "disque" avec un petit disque, un "cercle" avec un petit cercle, et un "carré" avec le contour d'un petit carré.

Un client Web graphique peut les afficher comme suit:

pour la valeur "disque"
pour la valeur "cercle"
pour la valeur "carré".

Pour l'élément OL, les valeurs possibles pour l'attribut type sont rappelées dans le tableau ci-dessous (ces valeurs sont dépendantes des majuscules/minuscules):

Type	Style de numérotation
1	chiffres arabes	1, 2, 3, ...
a	lettres minuscules	a, b, c, ...
A	lettres majuscules	A, B, C, ...
i	chiffres romains minuscules	i, ii, iii, ...
I	chiffres romains majuscules	I, II, III, ...

Notez que l'attribut type est indésirable et le style des listes doit être défini en utilisant des feuilles de style.

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Première étape ...
<LI> Deuxième étape ...
</OL>
</BODY>

La présentation d'une définition de liste dépend également du client Web. L'exemple:

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker on the Internet

  <DT>Nerd
  <DD>male so into the Net that he forgets
    his wife's birthday
</DL>

peut être présenté comme suit:

Dweeb
       young excitable person who may mature into a Nerd or Geek
Cracker
       hacker on the Internet
Nerd
       male so into the Net that he forgets his wife's birthday

10.4 The DIR and MENU elements

DIR and MENU are deprecated.

See the Transitional DTD for the formal definition.

L'élément DIR a été conçu dans le but de créer des listes/index sur plusieurs colonnes. L'élément MENU a été conçu dans le but de créer des listes/menu sur une seule colonne. Ces deux éléments ont la même structure que UL, la seule différence résidant dans l'affichage. En général, un client Web affichera une liste DIR ou MENU exactement comme une liste UL.

Nous vous recommendons fortement d'utiliser UL au lieu de ces éléments.