diff options
Diffstat (limited to 'files/fr/web/html/element/ol/index.md')
| -rw-r--r-- | files/fr/web/html/element/ol/index.md | 323 |
1 files changed, 179 insertions, 144 deletions
diff --git a/files/fr/web/html/element/ol/index.md b/files/fr/web/html/element/ol/index.md index c36383b0aa..475069e0b5 100644 --- a/files/fr/web/html/element/ol/index.md +++ b/files/fr/web/html/element/ol/index.md @@ -9,211 +9,246 @@ tags: - Reference translation_of: Web/HTML/Element/ol --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><ol></code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal 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é <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> +L'élément HTML **`<ol>`** représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal 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é [`list-style-type`](/fr/docs/Web/CSS/list-style-type). -<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}} <table class="properties"> <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a> si les enfants de l'élément <code><ol></code> incluent au moins un élément <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a>.</td> + <tr> + <th scope="row"> + <dfn + ><a href="/fr/docs/Web/Guide/HTML/Content_categories" + >Catégories de contenu</a + ></dfn + > + </th> + <td> + <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + >Contenu de flux</a + >, + <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content" + >contenu tangible</a + > + si les enfants de l'élément <code><ol></code> incluent au moins un + élément <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a + >. + </td> </tr> <tr> <th scope="row">Contenu autorisé</th> - <td>Zéro, un, ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> (qui peuvent imbriquer d'autres éléments <a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a> ou <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>), <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>.</td> + <td> + Zéro, un, ou plusieurs éléments + <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> (qui + peuvent imbriquer d'autres éléments + <a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a> ou + <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a + >), + <a href="/fr/docs/Web/HTML/Element/script" + ><code><script></code></a + > + ou + <a href="/fr/docs/Web/HTML/Element/template" + ><code><template></code></a + >. + </td> </tr> <tr> <th scope="row">Omission de balises</th> - <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires</td> + <td> + Aucune, la balise d'ouverture et la balise de fermeture sont + obligatoires + </td> </tr> <tr> <th scope="row">Parents autorisés</th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + <td> + Tout élément acceptant du + <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + >contenu de flux</a + >. + </td> </tr> <tr> <th scope="row">Rôle ARIA implicite</th> - <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> + <td> + <code + ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role" + >list</a + ></code + > + </td> </tr> <tr> <th scope="row">Rôles ARIA autorisés</th> - <td><a href="https://w3c.github.io/aria/#directory">directory</a>, <a href="https://w3c.github.io/aria/#group">group</a>, <a href="https://w3c.github.io/aria/#listbox">listbox</a>, <a href="https://w3c.github.io/aria/#menu">menu</a>, <a href="https://w3c.github.io/aria/#menubar">menubar</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#radiogroup">radiogroup</a>, <a href="https://w3c.github.io/aria/#tablist">tablist</a>, <a href="https://w3c.github.io/aria/#toolbar">toolbar</a>, <a href="https://w3c.github.io/aria/#tree">tree</a>.</td> + <td> + <a href="https://w3c.github.io/aria/#directory">directory</a>, + <a href="https://w3c.github.io/aria/#group">group</a>, + <a href="https://w3c.github.io/aria/#listbox">listbox</a>, + <a href="https://w3c.github.io/aria/#menu">menu</a>, + <a href="https://w3c.github.io/aria/#menubar">menubar</a>, + <a href="https://w3c.github.io/aria/#none">none</a>, + <a href="https://w3c.github.io/aria/#presentation">presentation</a>, + <a href="https://w3c.github.io/aria/#radiogroup">radiogroup</a>, + <a href="https://w3c.github.io/aria/#tablist">tablist</a>, + <a href="https://w3c.github.io/aria/#toolbar">toolbar</a>, + <a href="https://w3c.github.io/aria/#tree">tree</a>. + </td> </tr> <tr> <th scope="row">Interface DOM</th> - <td><a href="/fr/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></td> + <td> + <a href="/fr/docs/Web/API/HTMLOListElement" + ><code>HTMLOListElement</code></a + > + </td> </tr> </tbody> </table> -<h2 id="attributes">Attributs</h2> +## Attributs -<p>À l'instar des autres éléments HTML, il est possible d'utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> +À l'instar des autres éléments HTML, il est possible d'utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément. -<dl> - <dt><strong><code>reversed</code></strong></dt> - <dd>Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.</dd> - <dt><strong><code>start</code></strong></dt> - <dd>Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le <code>type</code> de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez <code>start="4"</code>.</dd> - <dt><strong><code>type</code></strong></dt> - <dd>Définit le type de numérotation : - <ul> - <li><code>a</code> pour les lettres minuscules</li> - <li><code>A</code> pour les lettres majuscules</li> - <li><code>i</code> pour les chiffres romains minuscules</li> - <li><code>I</code> pour les chiffres romains majuscules</li> - <li><code>1</code> pour les chiffres (par défaut)</li> - </ul> - <p>Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent <a href="/fr/docs/Web/HTML/Element/li#attr-type"><code>type</code></a> est utilisé sur un élément <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> fermé.</p> +- **`reversed`** + - : Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas. +- **`start`** + - : Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le `type` de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez `start="4"`. +- **`type`** - <div class="note"> - <p><strong>Note :</strong>À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> - </div> - </dd> -</dl> + - : Définit le type de numérotation : -<h2 id="usage_notes">Note d'utilisation</h2> + - `a` pour les lettres minuscules + - `A` pour les lettres majuscules + - `i` pour les chiffres romains minuscules + - `I` pour les chiffres romains majuscules + - `1` pour les chiffres (par défaut) -<p>En général, les éléments d'une liste ordonnée s'affichent avec un <a href="/en-US/docs/Web/CSS/::marker">marqueur</a> précédant l'élément, tel qu'un chiffre ou une lettre.</p> + Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent [`type`](/fr/docs/Web/HTML/Element/li#attr-type) est utilisé sur un élément [`<li>`](/fr/docs/Web/HTML/Element/li) fermé. -<p>Les éléments <code><ol></code> et <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre <code><ol></code> et <code><ul></code> comme vous le souhaitez.</p> + > **Note :**À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS [`list-style-type`](/fr/docs/Web/CSS/list-style-type). -<p>Les éléments <code><ol></code> et <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> représentent tous deux une liste d'éléments. La différence est qu'avec l'élément <code><ol></code>, l'ordre est significatif. Par exemple :</p> +## Note d'utilisation -<ul> - <li>Étapes d'une recette</li> - <li>Instructions détaillées</li> - <li>La liste des ingrédients en proportion décroissante sur les étiquettes d'information nutritionnelle</li> -</ul> +En général, les éléments d'une liste ordonnée s'affichent avec un [marqueur](/en-US/docs/Web/CSS/::marker) précédant l'élément, tel qu'un chiffre ou une lettre. -<p>Pour déterminer la liste à utiliser, essayez de modifier l'ordre des éléments de la liste ; si le sens change, utilisez l'élément <code><ol></code> - sinon, vous pouvez utiliser <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>.</p> +Les éléments `<ol>` et [`<ul>`](/fr/docs/Web/HTML/Element/ul) peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre `<ol>` et `<ul>` comme vous le souhaitez. -<h2 id="examples">Exemples</h2> +Les éléments `<ol>` et [`<ul>`](/fr/docs/Web/HTML/Element/ul) représentent tous deux une liste d'éléments. La différence est qu'avec l'élément `<ol>`, l'ordre est significatif. Par exemple : -<h3 id="simple_example">Exemple simple</h3> +- Étapes d'une recette +- Instructions détaillées +- La liste des ingrédients en proportion décroissante sur les étiquettes d'information nutritionnelle -<pre class="brush: html"><ol> - <li>Fee</li> - <li>Fi</li> - <li>Fo</li> - <li>Fum</li> -</ol> -</pre> +Pour déterminer la liste à utiliser, essayez de modifier l'ordre des éléments de la liste ; si le sens change, utilisez l'élément `<ol>` - sinon, vous pouvez utiliser [`<ul>`](/fr/docs/Web/HTML/Element/ul). -<p>Le HTML ci-dessus affichera :</p> +## Exemples -<p>{{EmbedLiveSample("simple_example", 400, 150)}}</p> +### Exemple simple -<h3 id="using_roman_numeral_type">Utilisation des chiffres romains</h3> +```html +<ol> + <li>Fee</li> + <li>Fi</li> + <li>Fo</li> + <li>Fum</li> +</ol> +``` -<pre class="brush: html"><ol start="i"> - <li>Introduction</li> - <li>Liste des Greffes</li> - <li>Conclusion</li> -</ol> -</pre> +Le HTML ci-dessus affichera : -<p>Le HTML ci-dessus affichera :</p> +{{EmbedLiveSample("simple_example", 400, 150)}} -<p>{{EmbedLiveSample("using_roman_numeral_type", 400, 150)}}</p> +### Utilisation des chiffres romains -<h3 id="using_the_start_attribute">Utilisation de l'attribut start</h3> +```html +<ol start="i"> + <li>Introduction</li> + <li>Liste des Greffes</li> + <li>Conclusion</li> +</ol> +``` -<pre class="brush: html"><p>Les places d'arrivée des concurrents qui ne sont pas dans le cercle des gagnants :</p> +Le HTML ci-dessus affichera : -<ol start="4"> - <li>Speedwalk Stu</li> - <li>Saunterin' Sam</li> - <li>Slowpoke Rodriguez</li> -</ol></pre> +{{EmbedLiveSample("using_roman_numeral_type", 400, 150)}} -<p>Le HTML ci-dessus affichera :</p> +### Utilisation de l'attribut start -<p>{{EmbedLiveSample("using_the_start_attribute", 400, 160)}}</p> +```html +<p>Les places d'arrivée des concurrents qui ne sont pas dans le cercle des gagnants :</p> -<h3 id="nesting_lists">Listes imbriquées</h3> +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin' Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +``` -<pre class="brush: html"><ol> - <li>Premier élément</li> - <li>Deuxième élément <!-- La fermeture </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 fermeture </li> ! --> - <li>Troisième élément</li> -</ol> -</pre> +Le HTML ci-dessus affichera : -<p>Le HTML ci-dessus affichera :</p> +{{EmbedLiveSample("using_the_start_attribute", 400, 160)}} -<p>{{EmbedLiveSample("nesting_lists", 400, 200)}}</p> +### Listes imbriquées -<h3 id="unordered_list_inside_ordered_list">Liste non ordonnée dans une liste ordonnée</h3> +```html +<ol> + <li>Premier élément</li> + <li>Deuxième élément <!-- La fermeture </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 fermeture </li> ! --> + <li>Troisième élément</li> +</ol> +``` -<pre class="brush: html"><ol> - <li>Premier élément</li> - <li>Deuxième élément <!-- La fermeture </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 fermeture </li> est ici. --> - <li>Troisième élément</li> -</ol> -</pre> +Le HTML ci-dessus affichera : -<p>Le HTML ci-dessus affichera :</p> +{{EmbedLiveSample("nesting_lists", 400, 200)}} -<p>{{EmbedLiveSample("unordered_list_inside_ordered_list", 400, 200)}}</p> +### Liste non ordonnée dans une liste ordonnée -<h2 id="specifications">Spécifications</h2> +```html +<ol> + <li>Premier élément</li> + <li>Deuxième élément <!-- La fermeture </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 fermeture </li> est ici. --> + <li>Troisième élément</li> +</ol> +``` -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Ajout des attributs <code>reversed</code> et <code>start</code>. L'attribut <code>type</code> n'est plus déprécié.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Dépréciation des attributs <code>compact</code> et <code>type</code>.</td> - </tr> - </tbody> -</table> +Le HTML ci-dessus affichera : -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +{{EmbedLiveSample("unordered_list_inside_ordered_list", 400, 200)}} -<p>{{Compat("html.elements.ol")}}</p> +## Spécifications -<h2 id="see_also">Voir aussi</h2> +| Spécification | Status | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}. | +| {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} | {{Spec2('HTML5 W3C')}} | Ajout des attributs `reversed` et `start`. L'attribut `type` n'est plus déprécié. | +| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} | {{Spec2('HTML4.01')}} | Dépréciation des attributs `compact` et `type`. | -<ul> - <li>Les autres éléments HTML relatifs aux listes : <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a>, <a href="/fr/docs/Web/HTML/Element/menu"><code><menu></code></a></li> - <li>Les propriétés CSS pouvant servir à la mise en forme de l'élément <code><ol></code> : - <ul> - <li><a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> qui permet de choisir comment les nombres ordinaux sont affichés,</li> - <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Les compteurs CSS</a>, utiles pour gérer les listes imbriquées complexes,</li> - <li><a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> qui permet d'obtenir le même effet que l'attribut <a href="/fr/docs/Web/HTML/Element/ol#attr-compact"><code>compact</code></a> qui est déprécié,</li> - <li><a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> qui permet de contrôler l'indentation de la liste.</li> - </ul> - </li> -</ul> +## Compatibilité des navigateurs + +{{Compat("html.elements.ol")}} + +## Voir aussi + +- Les autres éléments HTML relatifs aux listes : [`<ul>`](/fr/docs/Web/HTML/Element/ul), [`<li>`](/fr/docs/Web/HTML/Element/li), [`<menu>`](/fr/docs/Web/HTML/Element/menu) +- Les propriétés CSS pouvant servir à la mise en forme de l'élément `<ol>` : + + - [`list-style`](/fr/docs/Web/CSS/list-style) qui permet de choisir comment les nombres ordinaux sont affichés, + - [Les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters), utiles pour gérer les listes imbriquées complexes, + - [`line-height`](/fr/docs/Web/CSS/line-height) qui permet d'obtenir le même effet que l'attribut [`compact`](/fr/docs/Web/HTML/Element/ol#attr-compact) qui est déprécié, + - [`margin`](/fr/docs/Web/CSS/margin) qui permet de contrôler l'indentation de la liste. |