Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 412821 of <ol>

  • Raccourci de la révision : Web/HTML/Element/ol
  • Titre de la révision : <ol>
  • ID de la révision : 412821
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

L'élément HTML <ol> (pour Ordered List) représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un nombre cardinal associé pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété {{cssxref("list-style-type")}}.

Il n'y pas de limitation concernant la profondeur ou l'éventuelle imbrication des listes définies par les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.

Note d'utilisation : Les éléments {{HTMLElement("ol")}} et  {{HTMLElement("ul")}} représentent tout les deux une liste d'objets. Leur différence réside dans le fait qu'avec {{HTMLElement("ol")}} l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors {{HTMLElement("ol")}} doit être utilisé, sinon {{HTMLElement("ul")}} doit être utilisé.
  • Catégories de contenu   {{todo}} Contenu de flux, et du contenu palpable si les enfants de l'élément <ol> incluent au moins un élément {{HTMLElement("li")}}
  • Contenu autorisé Un ou plusieurs éléments {{HTMLElement("li")}}
  • Omission de balises {{no_tag_omission}}
  • Éléments parents autorisés Tout élément acceptant du contenu de flux
  • Interface DOM {{domxref("HTMLOListElement")}}

Attributs

Cet élément dispose des attributs globaux.

{{htmlattrdef("compact")}} {{Deprecated_inline}}
Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs. {{noteStart}} Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS {{cssxref("line-height")}} peut être utilisée avec une valeur de 80%.{{noteEnd}}
{{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}
Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre inversé (l'objet le moins important apparaît en première position).
{{htmlattrdef("start")}}{{HTMLVersionInline(5)}}
La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la liste sont numérotés. Bien que les indices des éléments puissent être des nombres romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour commencer la numérotation des éléments avec la lettre « C », il faudra entrer :<ol start="3">.
Note : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.
{{htmlattrdef("type")}}
Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants :
  • a : lettres minuscules
  • A : lettres majuscules
  • i : nombres romains en minuscules
  • I : nombres romains en majuscules
  • 1 : nombres
Le type selectionné est alors utilisé pour toute la liste à moins qu'un élément {{HTMLElement("li")}} de la liste utilise une autre valeur pour l'attribut {{htmlattrxref("type", "li")}}.
Note d'utilisation : Cet attribut a été déprécié. La propriété CSS {{cssxref("list-style-type")}} doit être utilisé à la place de cet attribut.

Exemples

Exemple simple

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

Le fragment de code HTML présenté ci-dessus produira le résultat suivant :

  1. Premier élément
  2. Deuxième élément
  3. Troisième élément

Exemple utilisant l'attribut start

<ol start="7">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>

Le fragment de code HTML présenté ci-dessus produira le résultat suivant :

  1. Premier élément
  2. Deuxième élément
  3. Troisième élément

Listes imbriquées

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément<!-- La balise </li> n'est pas encore placée ! -->
    <ol>
      <li>Premier élément de la liste imbriquée</li>
      <li>Deuxième élément de la liste imbriquée</li>
      <li>Troisième élément de la liste imbriquée</li>
    </ol>
  </li>                <!-- Voici la balise </li> ! -->
  <li>Troisième élément</li>
</ol>

Le fragment HTML ci-dessus produira :

  1. Premier élément
  2. Deuxième élément
    1. Premier élément de la liste imbriquée
    2. Deuxième élément de la liste imbriquée
    3. Troisième élément de la liste imbriquée
  3. Troisième élément

Listes imbriquées utilisant <ol> et <ul>

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément  <!-- La balise </li> n'est pas placée ici ! -->
    <ul>
      <li>Premier élément de la liste non-ordonnée imbriquée</li>
      <li>Deuxième élément de la liste non-ordonnée imbriquée</li>
      <li>Troisième élément de la liste non-ordonnée imbriquée</li>
    </ul>
  </li>                 <!-- La balise </li> est ici. -->
  <li>Troisième élément</li>
</ol>

Le HTML ci-dessus produira :

  1. Premier élément
  2. Deuxième élément
    • Premier élément de la liste non-ordonnée imbriquée
    • Deuxième élément de la liste non-ordonnée imbriquée
    • Troisième élément de la liste non-ordonnée imbriquée
  3. Troisième élément

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "<ol>")}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} {{Spec2('HTML4.01')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 {{CompatGeckoDesktop("1.0")}} 1.0 1.0 1.0
attribut reversed 18 {{CompatGeckoDesktop("18.0")}} {{CompatNo}} {{CompatNo}} 5.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
attribut reversed {{CompatVersionUnknown}} {{CompatGeckoMobile("18.0")}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}}

Voir aussi

  • Les autres éléments HTML en lien avec les listes : {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément {{HTMLElement("dir")}} qui est obsolète)
  • Les propriétés CSS pouvant servir à la mise en forme de l'élément <ol> :
    • La propriété {{cssxref("list-style")}} qui permet de choisir comment les nombres ordinaux sont affichés,
    • Les compteurs CSS, utiles pour gérer les listes imbriquées complexes,
    • La propriété {{cssxref("line-height")}} qui permet d'obtenir le me effet que l'attribut {{htmlattrxref("compact", "ol")}} qui est déprécié,
    • La propriété {{cssxref("margin")}} qui permet de contrôler l'indentation de la liste.
{{HTML:Element_Navigation}}

Source de la révision

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'élément <strong>HTML <code>&lt;ol&gt;</code> </strong>(pour <em>Ordered List</em>) représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un nombre cardinal associé pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété {{cssxref("list-style-type")}}.</p>
<p>Il n'y pas de limitation concernant la profondeur ou l'éventuelle imbrication des listes définies par les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p>
<div class="note">
  <strong>Note d'utilisation : </strong> Les éléments {{HTMLElement("ol")}} et&nbsp; {{HTMLElement("ul")}} représentent tout les deux une liste d'objets. Leur différence réside dans le fait qu'avec {{HTMLElement("ol")}} l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors {{HTMLElement("ol")}} doit être utilisé, sinon {{HTMLElement("ul")}} doit être utilisé.</div>
<ul class="htmlelt">
  <li><dfn><a href="/fr/docs/HTML/Catégorie_de_contenu" title="/fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu&nbsp;&nbsp; </a></dfn>{{todo}} <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenu de flux</a>, et du contenu palpable si les enfants de l'élément <code>&lt;ol&gt;</code> incluent au moins un élément {{HTMLElement("li")}}</li>
  <li><dfn>Contenu autorisé </dfn> Un ou plusieurs éléments {{HTMLElement("li")}}</li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés </dfn> Tout élément acceptant du <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenu de flux</a></li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLOListElement")}}</li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément dispose des <a href="/fr/docs/HTML/Global_attributes" title="/fr/docs/HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
  <dt>
    {{htmlattrdef("compact")}} {{Deprecated_inline}}</dt>
  <dd>
    Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs. {{noteStart}} Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS {{cssxref("line-height")}} peut être utilisée avec une valeur de <code>80%</code>.{{noteEnd}}</dd>
  <dt>
    {{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}</dt>
  <dd>
    Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre inversé (l'objet le moins important apparaît en première position).</dd>
  <dt>
    {{htmlattrdef("start")}}{{HTMLVersionInline(5)}}</dt>
  <dd>
    La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la liste sont numérotés. Bien que les indices des éléments puissent être des nombres romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour commencer la numérotation des éléments avec la lettre « C », il faudra entrer :<code>&lt;ol start="3"&gt;</code>.
    <div class="note">
      <strong>Note</strong> : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</div>
  </dd>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants :
    <ul>
      <li><code>a</code> : lettres minuscules</li>
      <li><code>A</code> : lettres majuscules</li>
      <li><code>i</code> : nombres romains en minuscules</li>
      <li><code>I</code> : nombres romains en majuscules</li>
      <li><code>1</code> : nombres</li>
    </ul>
    Le type selectionné est alors utilisé pour toute la liste à moins qu'un élément {{HTMLElement("li")}} de la liste utilise une autre valeur pour l'attribut {{htmlattrxref("type", "li")}}.
    <div class="note">
      <strong>Note d'utilisation :</strong> Cet attribut a été déprécié. La propriété CSS {{cssxref("list-style-type")}} doit être utilisé à la place de cet attribut.</div>
  </dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Simple_example" name="Simple_example">Exemple simple</h3>
<pre class="brush: html">
&lt;ol&gt;
  &lt;li&gt;Premier élément&lt;/li&gt;
  &lt;li&gt;Deuxième élément&lt;/li&gt;
  &lt;li&gt;Troisième élément&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>Le fragment de code HTML présenté ci-dessus produira le résultat suivant :</p>
<ol>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>
<h3 id="Exemple_utilisant_l'attribut_start">Exemple utilisant l'attribut <span style="font-family: Courier New;"><code>start</code></span></h3>
<pre class="brush: html">
&lt;ol start="7"&gt;
  &lt;li&gt;Premier élément&lt;/li&gt;
  &lt;li&gt;Deuxième élément&lt;/li&gt;
  &lt;li&gt;Troisième élément&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>Le fragment de code HTML présenté ci-dessus produira le résultat suivant :</p>
<ol start="7">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ol>
<h3 id="Listes_imbriqu.C3.A9es">Listes imbriquées</h3>
<pre class="brush: html">
&lt;ol&gt;
  &lt;li&gt;Premier élément&lt;/li&gt;
  &lt;li&gt;Deuxième élément&lt;!-- La balise &lt;/li&gt; n'est pas encore placée ! --&gt;
    &lt;ol&gt;
      &lt;li&gt;Premier élément de la liste imbriquée&lt;/li&gt;
      &lt;li&gt;Deuxième élément de la liste imbriquée&lt;/li&gt;
      &lt;li&gt;Troisième élément de la liste imbriquée&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;                &lt;!-- Voici la balise &lt;/li&gt; ! --&gt;
  &lt;li&gt;Troisième élément&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>Le fragment HTML ci-dessus produira :</p>
<ol>
  <li>Premier élément</li>
  <li>Deuxième élément
    <ol>
      <li>Premier élément de la liste imbriquée</li>
      <li>Deuxième élément de la liste imbriquée</li>
      <li>Troisième élément de la liste imbriquée</li>
    </ol>
  </li>
  <li>Troisième élément</li>
</ol>
<h3 id="Listes_imbriqu.C3.A9es_utilisant_&lt;ol&gt;_et_&lt;ul&gt;">Listes imbriquées utilisant &lt;ol&gt; et &lt;ul&gt;</h3>
<pre class="brush: html">
&lt;ol&gt;
  &lt;li&gt;Premier élément&lt;/li&gt;
  &lt;li&gt;Deuxième élément  &lt;!-- La balise &lt;/li&gt; n'est pas placée ici ! --&gt;
    &lt;ul&gt;
      &lt;li&gt;Premier élément de la liste non-ordonnée imbriquée&lt;/li&gt;
      &lt;li&gt;Deuxième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
      &lt;li&gt;Troisième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;                 &lt;!-- La balise &lt;/li&gt; est ici. --&gt;
  &lt;li&gt;Troisième élément&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>Le HTML ci-dessus produira :</p>
<ol>
  <li>Premier élément</li>
  <li>Deuxième élément
    <ul>
      <li>Premier élément de la liste non-ordonnée imbriquée</li>
      <li>Deuxième élément de la liste non-ordonnée imbriquée</li>
      <li>Troisième élément de la liste non-ordonnée imbriquée</li>
    </ul>
  </li>
  <li>Troisième élément</li>
</ol>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '&lt;ol&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "&lt;ol&gt;")}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>1.0</td>
        <td>1.0</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td>attribut <code>reversed</code></td>
        <td>18</td>
        <td>{{CompatGeckoDesktop("18.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>5.2</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>attribut <code>reversed</code></td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("18.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li>Les autres éléments HTML en lien avec les listes : {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément {{HTMLElement("dir")}} qui est obsolète)</li>
  <li>Les propriétés CSS pouvant servir à la mise en forme de l'élément <code>&lt;ol&gt; </code>:
    <ul>
      <li>La propriété {{cssxref("list-style")}} qui permet de choisir comment les nombres ordinaux sont affichés,</li>
      <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">Les compteurs CSS</a>, utiles pour gérer les listes imbriquées complexes,</li>
      <li>La propriété {{cssxref("line-height")}} qui permet d'obtenir le me effet que l'attribut {{htmlattrxref("compact", "ol")}} qui est déprécié,</li>
      <li>La propriété {{cssxref("margin")}} qui permet de contrôler l'indentation de la liste.</li>
    </ul>
  </li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revenir à cette révision