<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Les listes dans les documents HTML</title> <link rel="previous" href="text.html"> <link rel="next" href="tables.html"> <link rel="contents" href="../cover.html#toc"> <link rel="stylesheet" type="text/css" href=  "http://www.w3.org/StyleSheets/TR/W3C-REC"> <link rel="STYLESHEET" href="../style/default.css" type="text/css"> <style type="text/css"> ....translation {  background: #ccf5ff; border-bottom: 1px solid;   border-left: 1px solid; border-right: 1px solid; border-top: 1px solid;   color: #000000; padding: 0.8em; width: 90%; } ....traducteur {  background-color: yellow;} </style> </head> <body> <div class="translation">  <p> La version fran&ccedil;aise de cette traduction est : <br>  <a  href="http://www.la-grange.net/w3c/html4.01/">http://www.la-grange.net/w3c/html4.01/</a> <br> </p> <p> <b>Traducteur</b> : Eric Schreiner &lt;elrick@chez.com&gt;  dans le cadre de l'effort de la liste de discussion <a href="http://lists.w3.org/Archives/Public/w3c-translators-fr/">w3c-translators-fr@w3.org</a><br> La version fran&ccedil;aise peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : <a href= "http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> </p> </div>  <div class="navbar" align="center">&nbsp;<a href="text.html">pr&eacute;c&eacute;dent</a> &nbsp; <a href="tables.html">suivant</a> &nbsp; <a href="../cover.html#minitoc"> sommaire</a> &nbsp; <a href="../index/elements.html">&eacute;l&eacute;ments</a> &nbsp; <a href="../index/attributes.html">attributs</a> &nbsp; <a href=  "../index/list.html">index</a>   <hr></div>  <h1 align="center"><a name="h-10">10</a> Listes</h1>  <div class="subtoc"> <p><strong>Sommaire</strong></p>  <ol> <li><a class="tocxref" href="#h-10.1">Introduction sur les listes</a></li>  <li><a class="tocxref" href="#h-10.2"><span class="index-def" title=  "list::unordered">Les listes non ordonn&eacute;es</span> (<samp class="einst2">UL</samp>), <span class="index-def" title="list::ordered">les listes ordonn&eacute;es</span> (<samp class="einst2">OL</samp>), et les items de liste (<samp class= "einst2">LI</samp>)</a></li>  <li><a class="tocxref" href="#h-10.3"><span class="index-def" title=  "list::definition list">Les listes de d&eacute;finition(s)</span> : les &eacute;l&eacute;ments <samp class="einst2">DL</samp>, <samp class="einst2">DT</samp>, et <samp class="einst2">DD</samp></a>   <ol> <li><a class="tocxref" href="#h-10.3.1">La repr&eacute;sentation visuelle de listes</a></li> </ol> </li>  <li><a class="tocxref" href="#h-10.4">Les &eacute;l&eacute;ments <samp class="einst2">DIR</samp> et <samp class="einst2">MENU</samp></a></li> </ol> </div>  <h2><a name="h-10.1">10.1</a> Introduction sur les listes</h2>  HTML offre aux auteurs plusieurs m&eacute;canismes pour sp&eacute;cifier des listes d'information. Toutes les listes contiennent un ou plusieurs items de liste. Des listes peuvent contenir :  <ul> <li>Une ou des informations non ordonn&eacute;es.</li>  <li>Une ou des informations ordonn&eacute;es.</li>  <li>Une ou des d&eacute;finitions.</li> </ul>  <p>La liste ci-dessus, par exemple, est une liste non ordonn&eacute;e cr&eacute;&eacute;e &agrave; l'aide de l'&eacute;l&eacute;ment <ahref="lists.html#edef-UL" class= "noxref"><samp class="einst">UL</samp></a> et d&eacute;crite de la mani&egrave;re suivante :</p>  <pre class="example"> &lt;UL&gt; &lt;LI&gt;Une ou des informations non ordonn&eacute;es. &lt;LI&gt;Une ou des informations ordonn&eacute;es. &lt;LI&gt;Une ou des d&eacute;finitions.  &lt;/UL&gt; </pre>  <p>Une liste ordonn&eacute;e, cr&eacute;&eacute;e elle avec l'&eacute;l&eacute;ment <a href= "lists.html#edef-OL" class="noxref"><samp class="einst">OL</samp></a>, est pr&eacute;vue pour contenir des informations dans un ordre mis en exergue, comme dans la recette suivante :</p>  <ol> <li>M&eacute;langer compl&egrave;tement les ingr&eacute;dients secs.</li>  <li>Verser dans les ingr&eacute;dients humides.</li>  <li>M&eacute;langer pendant 10 minutes.</li>  <li>Cuire au four &agrave; 300 degr&eacute;s pendant une heure.</li> </ol>  <p>Les listes de d&eacute;finitions, cr&eacute;&eacute;es &agrave; l'aide de l'&eacute;l&eacute;ment <a href="lists.html#edef-DL" class="noxref"><samp class= "einst">DL</samp></a>, correspondent g&eacute;n&eacute;ralement &agrave; une s&eacute;rie de couples, consitu&eacute;s chacun d'un terme et de sa d&eacute;finition (bien qu'une liste de d&eacute;finitions puisse &ecirc;tre utilis&eacute;e pour autre chose). Ainsi, pour vanter un produit, on peut avoir une liste de d&eacute;finitions comme suit :</p>  <dl> <dt><strong>Co&ucirc;t r&eacute;duit</strong></dt>  <dd>La nouvelle version de ce produit co&ucirc;te significativement moins cher que la pr&eacute;c&eacute;dente !</dd>  <dt><strong>Plus facile d'emploi</strong></dt>  <dd>Nous avons modifi&eacute; le produit de mani&egrave;re &agrave; beaucoup plus faciliter  son emploi !</dd>  <dt><strong>Sans danger pour les enfants</strong></dt>  <dd>Vous pouvez laisser vos enfants seuls dans une pi&egrave;ce avec ce produit, ils ne se blesseront pas (ce n'est pas une garantie).</dd> </dl>  <p>d&eacute;crite en HTML par :</p>  <pre class="example"> &lt;DL&gt; &lt;DT&gt;&lt;STRONG&gt;Co&ucirc;t r&eacute;duit&lt;/STRONG&gt; &lt;DD&gt;La nouvelle version de ce produit co&ucirc;te significativement moins cher que la pr&eacute;c&eacute;dente ! &lt;DT&gt;&lt;STRONG&gt;Plus facile d'emploi&lt;/STRONG&gt; &lt;DD&gt;Nous avons modifi&eacute; le produit de mani&egrave;re &agrave; beaucoup plus faciliter son emploi ! &lt;DT&gt;&lt;STRONG&gt;Sans danger pour les enfants&lt;/STRONG&gt; &lt;DD&gt;Vous pouvez laisser vos enfants seuls dans une pi&egrave;ce avec ce produit, ils ne se blesseront pas (ce n'est pas une garantie). &lt;/DL&gt; </pre>  <p>Les listes, &eacute;ventuellement de types diff&eacute;rents, peuvent &eacute;galement &ecirc;tre imbriqu&eacute;es, comme dans l'exemple suivant pour lequel une liste de d&eacute;finitions comprend une liste non ordonn&eacute;e (les ingr&eacute;dients) et une liste ordonn&eacute;e (les &eacute;tapes).</p>  <dl> <dt><strong>Les ingr&eacute;dients :</strong></dt>  <dd> <ul> <li>100 g. de farine</li>  <li>10 g. de sucre</li>  <li>1 tasse d'eau</li>  <li>2 oeufs</li>  <li>sel, poivre</li> </ul> </dd>  <dt><strong>Les &eacute;tapes :</strong></dt>  <dd> <ol> <li>M&eacute;langer compl&egrave;tement les ingr&eacute;dients secs.</li>  <li>Verser dans les ingr&eacute;dients humides.</li>  <li>M&eacute;langer pendant 10 minutes.</li>  <li>Cuire au four &agrave; 300 degr&eacute;s pendant une heure.</li> </ol> </dd>  <dt><strong>Remarques :</strong></dt>  <dd>Cette recette peut &ecirc;tre am&eacute;lior&eacute;e en ajoutant des raisins.</dd> </dl>  <p>La repr&eacute;sentation exacte de ces trois types de liste d&eacute;pend de l'agent utilisateur. Les auteurs sont incit&eacute;s &agrave; ne pas utiliser une liste comme moyen de cr&eacute;er un retrait pour leur texte. Il s'agit d'un style de pr&eacute;sentation qui est tr&egrave;s bien g&eacute;r&eacute; par les feuilles de style.</p>  <h2><a name="h-10.2">10.2</a> Les <span class="index-def" title="list::unordered"><a name= "didx-list">listes non ordonn&eacute;es</a></span> (<a name="edef-UL"><samp class=  "edef">UL</samp></a>), les <span class="index-def" title="list::ordered"><a name=  "didx-list-1">listes ordonn&eacute;es</a></span> (<a name="edef-OL"><samp class= "edef">OL</samp></a>), et les items de liste (<a href="lists.html#edef-LI" class=  "noxref"><samp class="einst">LI</samp></a>)</h2>  <div class="dtd-fragment"> <pre class="dtd-fragment"> &lt;!ELEMENT <a href="lists.html#edef-UL" class="noxref"><samp class= "einst">UL</samp></a> - - (LI)+                 -- liste non ordnonn&eacute;e --&gt; &lt;!ATTLIST UL   <a href= "../sgml/dtd.html#attrs">%attrs;</a>                              -- <a href=  "../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href= "../sgml/dtd.html#i18n">%i18n</a>, <a href= "../sgml/dtd.html#events">%events</a> --   &gt; &lt;!ELEMENT <a href="lists.html#edef-OL" class="noxref"><samp class= "einst">OL</samp></a> - - (LI)+                 -- liste ordonn&eacute;e --&gt; &lt;!ATTLIST OL   <a href= "../sgml/dtd.html#attrs">%attrs;</a>                              -- <a href=  "../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href= "../sgml/dtd.html#i18n">%i18n</a>, <a href= "../sgml/dtd.html#events">%events</a> --   &gt; </pre> </div>  <p><em>Balise ouvrante : <strong>obligatoire</strong>, balise fermante: <strong> obligatoire</strong></em></p>  <div class="dtd-fragment"> <pre class="dtd-fragment"> &lt;!ELEMENT <a href="lists.html#edef-LI" class="noxref"><samp class= "einst">LI</samp></a> - O (<a href= "../sgml/dtd.html#flow">%flow;</a>)*             -- item de liste --&gt; &lt;!ATTLIST LI   <a href= "../sgml/dtd.html#attrs">%attrs;</a>                              -- <a href=  "../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href= "../sgml/dtd.html#i18n">%i18n</a>, <a href= "../sgml/dtd.html#events">%events</a> --   &gt; </pre> </div>  <p><em>Balise ouvrante : <strong>obligatoire</strong>, balise fermante : <strong> optionnelle</strong></em></p>  <div class="adef-list"> <p><em>D&eacute;finition des attributs</em></p>  <dl> <dt><a name="adef-type-LI"><samp class="adef">type</samp></a><a name=  "adef-type-UL">&nbsp;</a> =<a name="adef-type-OL">&nbsp;</a> <em> information de style</em> <a href="../types.html#case-insensitive">[CI]</a></dt>  <dd><a href="../conform.html#deprecated"><strong>D&eacute;pr&eacute;ci&eacute;.</strong></a> Cet attribut indique le style de l'item de la liste. Les valeurs couramment disponibles sont pr&eacute;vues pour les agents utilisateurs visuels. Les <a href="#type-values">valeurs possibles</a> sont d&eacute;crites ci-dessous (accompagn&eacute;es d'information de  casse).</dd>  <dt><a name="adef-start"><samp class="adef">start</samp></a> = <a href=  "../types.html#type-number"><em>nombre</em></a> <a href=  "../types.html#case-neutral">[CN]</a></dt>  <dd><a href="../conform.html#deprecated"><strong>D&eacute;pr&eacute;ci&eacute;.</strong></a> Pour <a href="lists.html#edef-OL" class="noxref"><samp class="einst">OL</samp></a> uniquement. Cet attribut fournit le num&eacute;ro du premier item de la liste ordonn&eacute;e. Par d&eacute;faut, il s'agit du num&eacute;ro 1. Noter que bien que num&eacute;rique, la valeur de cet attribut pourra correspondre &agrave; un libell&eacute; non num&eacute;rique. Ainsi, lorsque le style des items indique les lettres majuscules latines (A, B, C, ...), <samp>start=3</samp> signifiera "C" ; lorsque le style indique les nombres romains en minsucules, <samp>start=3</samp> signifiera "iii" ; et ainsi de suite.</dd>  <dt><a name="adef-value-LI"><samp class="adef">value</samp></a> = <a href=  "../types.html#type-number"><em>nombre</em></a> <a href=  "../types.html#case-neutral">[CN]</a></dt>  <dd><a href="../conform.html#deprecated"><strong>D&eacute;pr&eacute;ci&eacute;.</strong></a> Pour <a href="lists.html#edef-LI" class="noxref"><samp class="einst">LI</samp></a> uniquement. Cet attribut fournit le num&eacute;ro de l'item concern&eacute;. Noter que bien que num&eacute;rique, la valeur de cet attribut pourra correspondre &agrave; un libell&eacute; non num&eacute;rique (voir l'attribut <a href="lists.html#adef-start" class="noxref"><samp class= "ainst">start</samp></a>).</dd>  <dt><a name="adef-compact"><samp class="adef">compact</samp></a> <a href=  "../types.html#case-insensitive">[CI]</a></dt>  <dd><a href="../conform.html#deprecated"><strong>D&eacute;pr&eacute;ci&eacute;.</strong></a> Si il est sp&eacute;cifi&eacute;, cet attribut bool&eacute;en fournit, aux agents utilisateurs visuels, le conseil de repr&eacute;senter la liste d'une mani&egrave;re aussi compacte que possible. L'interpr&eacute;tation de cet attribut d&eacute;pend de l'agent utilisateur.</dd> </dl> </div>  <div class="aref-list"> <p><em>Attributs d&eacute;finis par ailleurs</em></p>  <ul> <li><a href="global.html#adef-id" class="noxref"><samp class="ainst"> id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=  "ainst">class</samp></a> (<a href= "../struct/global.html#id-and-class">identifiants internes au document</a>)</li>  <li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst"> lang</samp></a> (<a href="../struct/dirlang.html#language-info">information sur la  langue</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=  "ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">orientation du texte</a>)</li>  <li><a href="global.html#adef-title" class="noxref"><samp class="ainst"> title</samp></a> (<a href="../struct/global.html#title">&eacute;l&eacute;ment pour le titre</a>)</li>  <li><a href="../present/styles.html#adef-style" class="noxref"><samp class=  "ainst">style</samp></a> (<a href="../present/styles.html#style-element">information sur le style en-ligne</a> )</li>  <li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=  "ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick" class="noxref"><samp class="ainst">ondblclick</samp></a>, <a href=  "../interact/scripts.html#adef-onmousedown" class="noxref"><samp class="ainst"> onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup" class="noxref"><samp class="ainst">onmouseup</samp></a>, <a href=  "../interact/scripts.html#adef-onmouseover" class="noxref"><samp class="ainst"> onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove" class="noxref"><samp class="ainst">onmousemove</samp></a>, <a href=  "../interact/scripts.html#adef-onmouseout" class="noxref"><samp class="ainst"> onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress" class="noxref"><samp class="ainst">onkeypress</samp></a>, <a href=  "../interact/scripts.html#adef-onkeydown" class="noxref"><samp class="ainst"> onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class=  "noxref"><samp class="ainst">onkeyup</samp></a> (<a href=  "../interact/scripts.html#events">&eacute;v&eacute;nements intrins&egrave;ques</a> )</li> </ul> </div>  <p>Les listes ordonn&eacute;es et les listes non ordonn&eacute;es sont repr&eacute;sent&eacute;es &agrave; l'identique &agrave; l'exception de la num&eacute;rotation automatique des items d'une liste ordonn&eacute;e par l'agent utilisateur visuel. La mani&egrave;re de repr&eacute;senter ces num&eacute;ros est libre pour l'agent utilisateur, et de nombreuses variantes existent. Les items des listes non ordonn&eacute;es ne sont pas num&eacute;rot&eacute;s.</p>  <p>Ces deux types de liste sont constitu&eacute;s d'une suite d'items sp&eacute;cifi&eacute;s par l'&eacute;l&eacute;ment <a name="edef-LI"><samp class="edef">LI</samp></a> (pour lequel, la balise fermante peut &ecirc;tre omise).</p>  <div class="example"> <p>Cet exemple illustre la structure fondamentale d'une liste :</p>  <pre> &lt;UL&gt;    &lt;LI&gt; <em>... premier item de la liste ...</em>    &lt;LI&gt; <em>... deuxi&egrave;me item de la liste ...</em>    ... &lt;/UL&gt; </pre> </div>  <p><span class="index-inst" title="list::nesting of"><a name="idx-list-3">Les listes peuvent &eacute;galement &ecirc;tre imbriqu&eacute;es :</a></span></p>  <div class="deprecated-example"> <p><span class="example-title"><strong>Exemple <a href= "../conform.html#deprecated">d&eacute;pr&eacute;ci&eacute;</strong></a> :</span> <br> </p>  <pre> &lt;UL&gt;      &lt;LI&gt; <em>... niveau un, num&eacute;ro un ...</em>      &lt;OL&gt;          &lt;LI&gt; <em>... niveau deux, num&eacute;ro un...</em>         &lt;LI&gt; <em>... niveau deux, num&eacute;ro deux...</em>         &lt;OL start="10"&gt;             &lt;LI&gt; <em>... niveau trois, num&eacute;ro un...</em>         &lt;/OL&gt;          &lt;LI&gt; <em>... niveau deux, num&eacute;ro trois ...</em>      &lt;/OL&gt;       &lt;LI&gt; <em>... niveau un, num&eacute;ro deux ...</em> &lt;/UL&gt; </pre> </div>  <div class="note"> <p><em><span class="index-inst" title="list::numbering of"><a name= "idx-list-4"><strong>Voici des d&eacute;tails la num&eacute;rotation.</strong></a></span> Dans les listes ordonn&eacute;es, il n'est pas possible ni de poursuivre automatiquement la num&eacute;rotation d'une liste pr&eacute;c&eacute;dente, ni de masquer le num&eacute;ro de certains &eacute;l&eacute;ments de la liste. Toutefois, les auteurs peuvent modifier le num&eacute;ro de d&eacute;part d'un item de la liste par le biais de l'attribut <samp class= "ainst">value</samp>. La num&eacute;rotation partira de ce nouveau num&eacute;ro pour num&eacute;roter les items de la liste plac&eacute;s apr&egrave;s ce nouveau num&eacute;ro. Par exemple :</em></p>  <pre class="example"> &lt;ol&gt; &lt;li value="30"&gt; donne &agrave; cet item le num&eacute;ro 30. &lt;li value="40"&gt; donne &agrave; cet item le num&eacute;ro 40. &lt;li&gt; et du coup, cet item aura le num&eacute;ro 41. &lt;/ol&gt; </pre> </div>  <h2><a name="h-10.3">10.3</a> <span class="index-def" title="list::definition  list"><a name="didx-list-2">Liste de d&eacute;finitions </a></span>: les &eacute;l&eacute;ments <a name="edef-DL"><samp class="edef">DL</samp></a>, <a name= "edef-DT"><samp class="edef">DT</samp></a>, et <a name="edef-DD"><samp class= "edef">DD</samp></a></h2>  <div class="dtd-fragment"> <pre class="dtd-fragment"> &lt;!-- liste de d&eacute;finitions  - DT pour le terme, DD pour la description --&gt;  &lt;!ELEMENT <a href="lists.html#edef-DL" class="noxref"><samp class= "einst">DL</samp></a> - - (DT|DD)+              -- liste de d&eacute;finitions --&gt; &lt;!ATTLIST DL   <a href= "../sgml/dtd.html#attrs">%attrs;</a>                              -- <a href=  "../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href= "../sgml/dtd.html#i18n">%i18n</a>, <a href= "../sgml/dtd.html#events">%events</a> --   &gt; </pre> </div>  <p><em>Balise ouvrante: <strong>obligatoire</strong>, balise fermante : <strong> obligatoire</strong></em></p>  <div class="dtd-fragment"> <pre class="dtd-fragment"> &lt;!ELEMENT <a href="lists.html#edef-DT" class="noxref"><samp class= "einst">DT</samp></a> - O (<a href= "../sgml/dtd.html#inline">%inline;</a>)*           -- terme d&eacute;fini --&gt; &lt;!ELEMENT <a href="lists.html#edef-DD" class="noxref"><samp class= "einst">DD</samp></a> - O (<a href= "../sgml/dtd.html#flow">%flow;</a>)*             -- d&eacute;finition du terme --&gt; &lt;!ATTLIST (DT|DD)   <a href= "../sgml/dtd.html#attrs">%attrs;</a>                              -- <a href=  "../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href= "../sgml/dtd.html#i18n">%i18n</a>, <a href= "../sgml/dtd.html#events">%events</a> --   &gt; </pre> </div>  <p><em>Balise ouvrante : <strong>obligatoire</strong>, balise fermante : <strong> optionnelle</strong></em></p>  <div class="aref-list"> <p><em>Attributs d&eacute;finis par ailleurs</em></p>  <ul> <li><a href="global.html#adef-id" class="noxref"><samp class="ainst"> id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=  "ainst">class</samp></a> (<a href= "../struct/global.html#id-and-class">identifiants internes au document</a>)</li>  <li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst"> lang</samp></a> (<a href="../struct/dirlang.html#language-info">information sur la  langue</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=  "ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">orientation du texte</a>)</li>  <li><a href="global.html#adef-title" class="noxref"><samp class="ainst"> title</samp></a> (<a href="../struct/global.html#title">&eacute;l&eacute;ment pour le titre</a>)</li>  <li><a href="../present/styles.html#adef-style" class="noxref"><samp class=  "ainst">style</samp></a> (<a href="../present/styles.html#style-element">information sur le style en-ligne</a> )</li>  <li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=  "ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick" class="noxref"><samp class="ainst">ondblclick</samp></a>, <a href=  "../interact/scripts.html#adef-onmousedown" class="noxref"><samp class="ainst"> onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup" class="noxref"><samp class="ainst">onmouseup</samp></a>, <a href=  "../interact/scripts.html#adef-onmouseover" class="noxref"><samp class="ainst"> onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove" class="noxref"><samp class="ainst">onmousemove</samp></a>, <a href=  "../interact/scripts.html#adef-onmouseout" class="noxref"><samp class="ainst"> onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress" class="noxref"><samp class="ainst">onkeypress</samp></a>, <a href=  "../interact/scripts.html#adef-onkeydown" class="noxref"><samp class="ainst"> onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class=  "noxref"><samp class="ainst">onkeyup</samp></a> (<a href=  "../interact/scripts.html#events">&eacute;v&eacute;nements intrins&egrave;ques</a> )</li> </ul> </div>  <p>Les listes de d&eacute;finitions diff&egrave;rent l&eacute;g&egrave;rement des autres types de liste, dans la mesure o&ugrave; les items sont constitu&eacute;s de deux parties : un terme, et sa d&eacute;finition. Le terme est sp&eacute;cifi&eacute; par le biais d'un &eacute;l&eacute;ment <a href="lists.html#edef-DT" class="noxref"><samp class="einst">DT</samp></a> et son contenu est restreint au type en-ligne. La d&eacute;finition est une description sp&eacute;cifi&eacute;e par le biais d'un &eacute;l&eacute;ment <a href= "lists.html#edef-DD" class="noxref"><samp class="einst">DD</samp></a> qui lui peut avoir un contenu de type bloc.</p>  <div class="example"> <p>Voici un exemple :</p>  <pre>    &lt;DL&gt;   &lt;DT&gt;Dweeb   &lt;DD&gt;young excitable person who may mature     into a &lt;EM&gt;Nerd&lt;/EM&gt; or &lt;EM&gt;Geek&lt;/EM&gt;    &lt;DT&gt;Hacker   &lt;DD&gt;a clever programmer    &lt;DT&gt;Nerd   &lt;DD&gt;technically bright but socially inept person  &lt;/DL&gt; </pre> </div>  <div class="example"> <p>L'exemple suivant contient plusieurs termes et plusieurs d&eacute;finitions :</p>  <pre> &lt;DL&gt;    &lt;DT&gt;Center    &lt;DT&gt;Centre    &lt;DD&gt; A point equidistant from all points               on the surface of a sphere.    &lt;DD&gt; In some field sports, the player who               holds the middle position on the field, court,               or forward line. &lt;/DL&gt; </pre> </div>  <p>Une autre utilisation possible pour une liste <a href="lists.html#edef-DL" class= "noxref"><samp class="einst">DL</samp></a>, par exemple, peut consister &agrave; marquer des dialogues, avec chaque &eacute;l&eacute;ment <a href="lists.html#edef-DT" class= "noxref"><samp class="einst">DT</samp></a> contenant le nom de la personne, et avec chaque &eacute;l&eacute;ment <a href="lists.html#edef-DD" class="noxref"><samp class= "einst">DD</samp></a> contenant ses paroles.</p>  <h3><a name="h-10.3.1">10.3.1</a> <span class="index-inst" title="list::visual  rendering of"><a name="idx-list-5">Rendu visuel des listes</a></span></h3>  <div class="note"> <p><em><strong>Nota.</strong> Cette section est une description, pour information, du comportement suivi par les agents utilisateurs visuels courants lorsqu'ils repr&eacute;sentent les listes. Les feuilles de style permettent un contr&ocirc;le plus fin de cette restitution (par exemple : la num&eacute;rotation, les conventions li&eacute;es &agrave; la langue, le retrait, etc.).</em></p> </div>  <p>Les agents utilisateurs visuels placent les listes en retrait en fonction de leur profondeur respective d'imbrication.</p>  <p>Pour les deux types de liste, non ordonn&eacute;e avec l'&eacute;l&eacute;ment <a href= "lists.html#edef-UL" class="noxref"><samp class="einst">UL</samp></a> et ordonn&eacute;e avec l'&eacute;l&eacute;ment <a href="lists.html#edef-OL" class="noxref"><samp class= "einst">OL</samp></a>, l'attribut <a href="lists.html#adef-type-LI" class= "noxref"><samp class="ainst-LI">type</samp></a> sp&eacute;cifie les options de rendu pour les agents utilisateurs visuels.</p>  <p>Pour le type de liste ordonn&eacute;e avec l'&eacute;l&eacute;ment <a href= "lists.html#edef-UL" class="noxref"><samp class="einst">UL</samp></a>, les <a name= "type-values">valeurs possibles</a> pour l'attribut <a href="lists.html#adef-type-LI" class= "noxref"><samp class="ainst-LI">type</samp></a> sont <samp>disc</samp> (un disque), <samp>square</samp> (un carr&eacute;), et <samp>circle</samp> (un cercle). La valeur par d&eacute;faut d&eacute;pendra du niveau d'imbrication de la liste concern&eacute;e. Ces valeurs ne sont pas sensibles &agrave; la casse.</p>  <p>La mani&egrave;re de r&eacute;presenter ces valeurs d&eacute;pend de l'agent utilisateur. Les agents utilisateurs devraient tenter de repr&eacute;senter 'disc' par un petit cercle plein, 'circle' par le contour d'un petit cercle, et 'square' par le contour d'un petit carr&eacute;.</p>  <p>Un agent utilisateur graphique pourraient utilis&eacute; :</p>  <p><img src="../images/lidisc.gif" alt="A possible rendering of a disc">pour la valeur 'disc' <br> <img src="../images/licircle.gif" alt="A possible rendering of a circle">pour la valeur 'circle' <br> <img src="../images/lisquare.gif" alt="A possible rendering of a square">pour la valeur 'square'</p>  <p>Pour l'&eacute;l&eacute;ment <a href="lists.html#edef-OL" class="noxref"><samp class= "einst">OL</samp></a>, les valeurs possibles pour l'attribut <a href= "lists.html#adef-type-LI" class="noxref"><samp class="ainst-LI">type</samp></a> sont r&eacute;sum&eacute;es dans le tableau ci-dessous (elles sont sensibles &agrave; la casse) :</p>  <table summary="Table showing values for the type attribute for the OL element,  the number systems they represent, and example numbers generated by each value" border="1" width="80%" align="center"> <tr> <th>Type</th> <th colspan="2">Style de num&eacute;rotation</th> </tr>  <tr> <td align="center">1</td> <td align="center">nombres arabes</td> <td align="center">1, 2, 3, ...</td> </tr>  <tr> <td align="center">a</td> <td align="center">lettres de l'alphabet en minuscule</td> <td align="center">a, b, c, ...</td> </tr>  <tr> <td align="center">A</td> <td align="center">lettres de l'alphabet en majuscule</td> <td align="center">A, B, C, ...</td> </tr>  <tr> <td align="center">i</td> <td align="center">nombres romains en minuscule</td> <td align="center">i, ii, iii, ...</td> </tr>  <tr> <td align="center">I</td> <td align="center">nombres romains en majuscule</td> <td align="center">I, II, III, ...</td> </tr> </table>  <p>Notez que l'attribut <a href="lists.html#adef-type-LI" class="noxref"><samp class=  "ainst-LI">type</samp></a> est <a href= "../conform.html#deprecated">d&eacute;pr&eacute;ci&eacute;</a> et que les <span class= "index-inst" title="list::style sheets and"><a name="idx-list-6">styles de liste devraient &ecirc;tre g&eacute;r&eacute;s par le biais des feuilles de style.</a></span></p>  <div class="example"> <p>Par exemple, en utilisant CSS, il est possible de sp&eacute;cifier que le style de la num&eacute;rotation pour les items d'une liste ordonn&eacute;e sera des nombres romains en minuscule. Ainsi, l'extrait ci-dessous chaque &eacute;l&eacute;ment <a href= "lists.html#edef-OL" class="noxref"><samp class="einst">OL</samp></a> appartenant &agrave; la classe "withroman" aura cette caract&eacute;ristique.</p>  <pre> &lt;STYLE type="text/css"&gt; OL.withroman { list-style-type: lower-roman } &lt;/STYLE&gt; &lt;BODY&gt; &lt;OL class="withroman"&gt; &lt;LI&gt; premi&egrave;re &eacute;tape ...   &lt;LI&gt; deuxi&egrave;me &eacute;tape ... &lt;/OL&gt; &lt;/BODY&gt; </pre> </div>  <p>La repr&eacute;sentation d'une liste de d&eacute;finitions d&eacute;pend &eacute;galement de l'agent utilisateur. L'exemple :</p>  <pre> &lt;DL&gt;   &lt;DT&gt;Dweeb   &lt;DD&gt;young excitable person who may mature     into a &lt;EM&gt;Nerd&lt;/EM&gt; or &lt;EM&gt;Geek&lt;/EM&gt;    &lt;DT&gt;Hacker   &lt;DD&gt;a clever programmer    &lt;DT&gt;Nerd   &lt;DD&gt;technically bright but socially inept person &lt;/DL&gt; </pre>  <p>peut &ecirc;tre repr&eacute;sent&eacute; comme suit :</p>  <pre> Dweeb        young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em> Hacker        a clever programmer Nerd        technically bright but socially inept person </pre>  <h2><a name="h-10.4">10.4</a> Les &eacute;l&eacute;ments <a name="edef-DIR"><samp class= "edef">DIR</samp></a> et<a name="edef-MENU"><samp class="edef">MENU</samp></a></h2>  <p><strong>Les &eacute;l&eacute;ments DIR et MENU sont <a href= "../conform.html#deprecated">d&eacute;pr&eacute;ci&eacute;</a>.</strong></p>  <p>Voir la rubrique <a href="../sgml/loosedtd.html#dir">Transitional DTD</a> pour avoir leur ancienne d&eacute;finition.</p>  <div class="aref-list"> <p><em>Attributs d&eacute;finis par ailleurs</em></p>  <ul> <li><a href="global.html#adef-id" class="noxref"><samp class="ainst"> id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=  "ainst">class</samp></a> (<a href= "../struct/global.html#id-and-class">identifiants internes au document</a>)</li>  <li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst"> lang</samp></a> (<a href="../struct/dirlang.html#language-info">information sur la  langue</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=  "ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">orientation du texte</a>)</li>  <li><a href="global.html#adef-title" class="noxref"><samp class="ainst"> title</samp></a> (<a href="../struct/global.html#title">&eacute;l&eacute;ment pour le  titre</a>)</li>  <li><a href="../present/styles.html#adef-style" class="noxref"><samp class=  "ainst">style</samp></a> (<a href="../present/styles.html#style-element">information sur le  style en-ligne</a> )</li>  <li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=  "ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick"class= "noxref"><samp class="ainst">ondblclick</samp></a>, <a href= "../interact/scripts.html#adef-onmousedown" class="noxref"><samp class= "ainst">onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup" class= "noxref"><samp class="ainst">onmouseup</samp></a>, <a href= "../interact/scripts.html#adef-onmouseover" class="noxref"><samp class= "ainst">onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove" class= "noxref"><samp class="ainst">onmousemove</samp></a>, <a href= "../interact/scripts.html#adef-onmouseout" class="noxref"><samp class= "ainst">onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress" class= "noxref"><samp class="ainst">onkeypress</samp></a>, <a href= "../interact/scripts.html#adef-onkeydown" class="noxref"><samp class= "ainst">onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class= "noxref"><samp class="ainst">onkeyup</samp></a> (<a href= "../interact/scripts.html#events">&eacute;v&eacute;nements intrins&egrave;ques</a> )</li> </ul> </div>  <p>L'&eacute;l&eacute;ment <a href="lists.html#edef-DIR" class="noxref"><samp class= "einst">DIR</samp></a> &eacute;tait pr&eacute;vu pour pouvoir cr&eacute;er des listes multicolonne de r&eacute;pertoires. L'&eacute;l&eacute;ment <a href= "lists.html#edef-MENU" class="noxref"><samp class="einst">MENU</samp></a> &eacute;tait pr&eacute;vu pour pouvoir cr&eacute;er une liste de menus sur une seule colonne. Ces deux &eacute;l&eacute;ments ont la m&ecirc; structure que l'&eacute;l&eacute;ment <a href= "lists.html#edef-UL" class="noxref"><samp class="einst">UL</samp></a>, avec juste une repr&eacute;sentation diff&eacute;rente. En pratique, un agent utilisateur repr&eacute;sentera une liste issue d'un &eacute;l&eacute;ment <a href="lists.html#edef-DIR" class= "noxref"><samp class="einst">DIR</samp></a> ou <a href="lists.html#edef-MENU" class= "noxref"><samp class="einst">MENU</samp></a> exactement comme une liste d'un &eacute;l&eacute;ment <a href="lists.html#edef-UL" class="noxref"><samp class= "einst">UL</samp></a>.</p>  <p>Il est fortement recommand&eacute; d'utiliser l'&eacute;l&eacute;ment <a href= "lists.html#edef-UL" class="noxref"><samp class="einst">UL</samp></a> &agrave; la place de ces &eacute;l&eacute;ments <a href="lists.html#edef-DIR" class="noxref"><samp class= "einst">DIR</samp></a> ou <a href="lists.html#edef-MENU"class="noxref"><samp class= "einst">MENU</samp></a>.</p>  <div class="navbar" align="center"> <hr><a href="text.html">pr&eacute;c&eacute;dent</a> &nbsp; <a href="tables.html">suivant</a> &nbsp; <a href="../cover.html#minitoc">sommaire</a> &nbsp; <a href=  "../index/elements.html">&eacute;l&eacute;ments</a> &nbsp; <a href= "../index/attributes.html">attributs</a> &nbsp; <a href="../index/list.html"> index</a></div> </body> </html>   
