Pour afficher des chemins de section complets tels que 1.2.1, imbriquez des listes ordonnées et utilisez counters() en CSS pour joindre leurs niveaux. Ce tutoriel crée un fichier HTML local sur Mac, préserve l’ordre du plan et montre comment vérifier la numérotation après des modifications.

Comment fonctionne la numérotation avec chemin complet ?

Un chemin de section complet indique la position d’un élément à chaque niveau. Par exemple, 1.2.1 désigne le premier élément du deuxième enfant du premier élément de niveau supérieur. CSS fournit counters() précisément pour combiner les valeurs des compteurs imbriqués, de celui le plus externe à celui le plus interne, en insérant le séparateur de votre choix. MDN : fonction CSS counters()

Pour cette tâche, le plan est une liste ordonnée comportant des branches imbriquées. Il ne s’agit pas d’une table des matières générée automatiquement à partir de titres situés ailleurs dans un document. En HTML, les éléments d’une liste ordonnée sont définis dans l’ordre de l’arbre ; veillez donc à ce que l’ordre du code source corresponde à l’ordre de lecture voulu. Standard HTML : élément ol

L’exemple utilise trois règles : créer un compteur sur chaque liste concernée, l’incrémenter pour chaque élément et afficher le chemin combiné avant le libellé de l’élément. Il reprend le modèle documenté par MDN pour les compteurs imbriqués, en limitant les sélecteurs à ce plan. MDN : Utiliser les compteurs CSS

Créer le fichier du plan sur votre Mac

Vous avez besoin de TextEdit et d’un navigateur comme Safari. L’exemple complet contient sa propre feuille de style et du contenu d’exemple fictif ; il ne nécessite ni paquet, ni outil de compilation, ni JavaScript.

  1. Ouvrez TextEdit et choisissez Fichier > Nouveau.
  2. Choisissez Format > Convertir au format texte.
  3. Collez l’exemple complet ci-dessous.
  4. Choisissez Fichier > Enregistrer, nommez le fichier outline.html et enregistrez-le à un endroit pratique, comme votre bureau.
  5. Si TextEdit vous demande quelle extension utiliser, choisissez Utiliser .html.

Apple décrit cette procédure en texte brut pour créer des fichiers HTML dans TextEdit. Apple : Travailler avec des documents HTML dans TextEdit sur Mac

Voici un document complet. Copiez le contenu du bloc de code sans les lignes de délimitation Markdown.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Ouvrez Safari, puis faites glisser outline.html depuis le Finder dans une fenêtre Safari. Utilisez TextEdit pour modifier le code source et Safari pour inspecter le plan affiché. Après chaque modification, enregistrez le fichier et rechargez la page du navigateur.

Garder TextEdit en mode édition de code

À la réouverture du fichier, vous pouvez voir du contenu mis en forme plutôt que le code source. Apple décrit deux options : utilisez Fichier > Ouvrir, cliquez sur Afficher les options et sélectionnez Ignorer les commandes de texte enrichi ; ou activez Afficher les fichiers HTML comme du code HTML plutôt que comme du texte mis en forme sous TextEdit > Réglages > Ouverture et enregistrement. Apple : Travailler avec des documents HTML dans TextEdit sur Mac

Vérifier les chemins complets à l’aide de l’exemple

Le plan attendu à l’écran figure ci-dessous. Les libellés sont des substituts neutres ; ce sont leurs positions qui déterminent les numéros.

1 Node A
  1.1 Node B
  1.2 Node C
    1.2.1 Node D
    1.2.2 Node E
  1.3 Node F
2 Node G
  2.1 Node H
3 Node I

Cet exemple vérifie trois transitions distinctes. Node D commence un troisième niveau sous Node C. Node F reprend le deuxième niveau après la fin de cette branche. Node G reprend le niveau supérieur, et son premier enfant commence par 2.1. Un parcours déterministe de l’arborescence de l’exemple a confirmé ces chemins attendus ; l’exemple n’a pas été affiché dans un navigateur lors de sa préparation.

Pourquoi chaque règle CSS est importante

La réinitialisation s’applique à .outline et à .outline ol. Chaque liste imbriquée a besoin d’une nouvelle instance de outline-section ; réinitialiser uniquement la liste externe ne créerait pas un compte distinct pour chaque profondeur. L’incrémentation sur chaque élément de liste fait avancer l’instance active. MDN : Utiliser les compteurs CSS

La règle d’affichage utilise counters(outline-section, "."). La fonction au pluriel rassemble toutes les instances actives portant ce nom. La remplacer par la forme singulière counter(outline-section) n’afficherait que la valeur du niveau courant ; un élément imbriqué serait alors libellé 1 au lieu d’afficher son chemin complet. MDN : fonction CSS counters()

L’exemple supprime les marqueurs natifs de liste puisqu’il fournit ses propres préfixes. Chaque liste a aussi role="list" : MDN indique que, sans cela, Safari peut omettre de son arbre d’accessibilité les listes stylisées avec list-style-type: none. Conservez cet attribut lorsque vous ajoutez une autre liste imbriquée. MDN : propriété CSS list-style-type

Modifier le plan sans en briser la structure

Placez chaque <ol> imbriqué à l’intérieur du <li> qui contient la branche. Par exemple, Node C contient sa liste enfant avant la balise de fermeture </li> de Node C. Une liste imbriquée ne doit pas être un enfant direct d’une autre liste ordonnée. MDN : élément de liste ordonnée HTML

Pour tester une modification concrète, ajoutez un nouvel élément juste avant Node C. Son nouveau chemin devrait être 1.2 ; Node C devrait devenir 1.3 ; et Node D et Node E devraient devenir 1.3.1 et 1.3.2. Node G devrait rester 2. Ces changements attendus découlent de la hiérarchie de l’exemple et permettent de vérifier que la numérotation suit la structure des branches.

Pour déplacer une branche, déplacez l’élément de liste qui la contient dans son ensemble, avec ses listes imbriquées et sa balise de fermeture. Si vous ne déplacez que son libellé, ses enfants resteront sur place. Pour créer un quatrième niveau, répétez la structure de liste imbriquée existante à l’intérieur de l’élément approprié ; ne saisissez pas de numéro supplémentaire dans le libellé.

Conservez une seule liste enfant par branche lorsque ses éléments doivent former une séquence continue. Dans cette implémentation, la création d’une autre liste enfant sœur provoque une nouvelle réinitialisation, et sa numérotation locale recommence donc. L’exemple de MDN montre ce redémarrage avec des listes imbriquées distinctes sous le même élément. MDN : Utiliser les compteurs CSS

Diagnostiquer les erreurs de numérotation dans un ordre utile

Commencez par la structure, puis vérifiez les règles des compteurs, puis la présentation. Modifier l’indentation ne peut pas réparer un niveau d’imbrication manquant.

Ce que vous voyez Élément à inspecter Correction pour cet exemple
Chaque élément imbriqué affiche un seul numéro La fonction dans content Utilisez counters() au pluriel avec le point comme séparateur.
Chaque élément frère recommence à 1 Le sélecteur de réinitialisation Réinitialisez les listes, et non chaque élément.
Des numéros natifs apparaissent à côté des chemins complets La règle list-style Appliquez list-style-type: none aux listes externe et imbriquées.
Une branche a un préfixe inattendu L’emplacement de sa liste imbriquée Gardez la liste enfant dans l’élément qui la contient.
Une autre liste située ailleurs reçoit des préfixes La portée du sélecteur de compteur Gardez le préfixe .outline dans les règles.

Vérifiez également si un élément a été masqué. Les opérations sur les compteurs CSS ne s’exécutent pas sur les éléments qui ne génèrent aucune boîte, notamment ceux ayant display: none. En revanche, visibility: hidden génère toujours une boîte et peut donc influer sur le comptage. Déterminez délibérément si un élément omis doit occuper une position. W3C : Compteurs sur les éléments qui ne génèrent pas de boîtes

Qu’en est-il des numéros de départ personnalisés ?

Cet exemple utilise délibérément un compteur personnalisé qui part de zéro et s’incrémente jusqu’à un. Les attributs HTML tels que start, reversed et value d’un élément de liste contrôlent la numérotation native des listes ordonnées ; les règles personnalisées outline-section présentées ici ne lisent pas ces attributs. Ajouter uniquement start="4" ne fera donc pas commencer le préfixe affiché par cet exemple à 4. Standard HTML : listes ordonnées et éléments de liste

Si vous avez besoin d’une numérotation discontinue ou de branches décroissantes, définissez cette exigence avant d’adapter cette feuille de style. Veillez à ce que le chemin affiché corresponde aux valeurs voulues pour la liste ordonnée, au lieu d’ajouter des attributs ignorés par l’affichage personnalisé.

Déterminer si les numéros relèvent de la présentation ou du contenu du document

Les préfixes de ce tutoriel sont générés par CSS. Ils conviennent à un plan visuel, mais les références essentielles demandent une attention particulière : MDN indique que le contenu ajouté par ::before n’est pas transmis de manière fiable aux lecteurs d’écran. Ajouter role="list" préserve la reconnaissance de la liste ; cela ne garantit pas que chaque chemin généré sera annoncé. MDN : pseudo-élément CSS ::before

Si un chemin complet doit faire partie du texte réel, par exemple dans une exportation en texte brut, incluez-le sous forme de texte dans le document ou générez-le lors de l’exportation. Cela change les modalités de maintenance : il faut aussi mettre à jour ces chemins enregistrés à chaque modification. Ne comptez pas sur un préfixe visuel pour fournir un texte essentiel dans tous les formats de sortie.

Pour un plan visuel local, terminez en vérifiant les neuf chemins de l’exemple, en insérant un élément frère et en confirmant que la branche concernée est renumérotée comme prévu. Une fois ces vérifications effectuées dans votre navigateur, remplacez les libellés fictifs en conservant l’imbrication et l’ordre du code source.

Sources