HTML Academy · Leçon

Listes ordonnées ol, start, reversed et type

Créez des listes numérotées et personnalisez leur séquence.

Listes ordonnées ol, start, reversed et type est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu’est-ce qu’une liste ordonnée ?

Une liste ordonnée affiche des éléments dont la séquence est importante :

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

L’élément ol

L’élément <ol> (liste ordonnée) affiche par défaut les éléments de liste avec des nombres séquentiels :

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

L’attribut start

L’attribut start définit le nombre de départ :

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

L’attribut reversed

L’attribut reversed effectue un compte à rebours au lieu de compter vers le haut :

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

L’attribut type

L’attribut type modifie le style du marqueur :

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type en CSS ou en HTML

Préférez CSS list-style-type à l’attribut HTML type :

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

Attribut value sur li

Remplacez le numéro d’éléments de liste individuels avec value :

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

ol et ul imbriqués

Les listes peuvent être imbriquées — combinez listes ordonnées et non ordonnées :

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Cas d’utilisation sémantiques

Utilisez <ol> lorsque l’ordre a une signification :

Instructions étape par étape
Résultats classés (listes des 10 premiers)
Sections de documents juridiques
Étapes d’une recette
Table des matières avec des sections numérotées

Réinitialisation des compteurs en CSS

Les compteurs CSS vous donnent un contrôle complet sur le style de numérotation des listes :

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol pour les fils d’Ariane

La navigation par fil d’Ariane est sémantiquement une liste ordonnée :

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Vérification rapide

Quel attribut permet à un ol de compter à rebours ?

Récapitulatif : listes ordonnées

Éléments essentiels des listes ordonnées :

<ol> — liste séquentielle où l’ordre est important
start — commencer la numérotation à un nombre personnalisé
reversed — compter à rebours
type — modifier le marqueur : 1, a, A, i, I
value sur <li> — remplacer le numéro d’un élément individuel
Utilisez CSS list-style-type et les compteurs pour davantage de contrôle

Questions Fréquemment Posées

La leçon « Listes ordonnées ol, start, reversed et type » est-elle gratuite ?

Oui — le texte complet de « Listes ordonnées ol, start, reversed et type » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Listes ordonnées ol, start, reversed et type » ?

Créez des listes numérotées et personnalisez leur séquence. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Listes ordonnées ol, start, reversed et type » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Listes non ordonnées ul et li
Listes ordonnées ol, start, reversed et type
Listes de descriptions dl, dt et dd
Listes imbriquées et style des listes

← Retour à HTML Academy