Para mostrar rutas completas de sección, como 1.2.1, anida listas ordenadas y usa counters() de CSS para unir sus niveles. Este tutorial crea un archivo HTML local en un Mac, conserva el orden del esquema y muestra cómo comprobar la numeración después de editarlo.

¿Cómo funciona la numeración de rutas completas?

Una ruta completa de sección registra la posición de un elemento en cada nivel. Por ejemplo, 1.2.1 significa el primer elemento dentro del segundo elemento secundario del elemento de nivel superior. CSS ofrece counters() específicamente para combinar valores de contadores anidados: los lee desde el contador más externo hasta el más interno e inserta el separador que elijas. MDN: función CSS counters()

Para esta tarea, el esquema es una lista ordenada con ramas anidadas. No es una tabla de contenido generada automáticamente para encabezados ubicados en otras partes del documento. HTML define los elementos de una lista ordenada según el orden del árbol, así que el orden del código fuente debe coincidir con el orden de lectura previsto. Estándar HTML: el elemento ol

El ejemplo usa tres reglas: crea un contador en cada lista participante, lo incrementa para cada elemento y muestra la ruta combinada antes de la etiqueta del elemento. Sigue el patrón documentado por MDN para contadores anidados, con selectores limitados a este esquema. MDN: Uso de contadores CSS

Crea el archivo del esquema en tu Mac

Necesitas TextEdit y un navegador como Safari. El ejemplo completo incluye su propia hoja de estilos y contenido de muestra ficticio; no requiere paquetes, herramientas de compilación ni JavaScript.

  1. Abre TextEdit y selecciona Archivo > Nuevo.
  2. Selecciona Formato > Convertir en texto sin formato.
  3. Pega el ejemplo completo que aparece a continuación.
  4. Selecciona Archivo > Guardar, ponle al archivo el nombre outline.html y guárdalo en un lugar práctico, como el Escritorio.
  5. Si TextEdit te pregunta qué extensión usar, selecciona Usar .html.

Apple documenta este flujo de trabajo con texto sin formato para crear archivos HTML en TextEdit. Apple: Trabajar con documentos HTML en TextEdit en Mac

El siguiente es un documento completo. Copia el contenido del bloque de código, sin incluir las líneas de delimitación de 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>

Abre Safari y arrastra outline.html desde Finder hasta una ventana de Safari. Usa TextEdit para editar el código fuente y Safari para inspeccionar el esquema renderizado. Después de cada edición, guarda el archivo y vuelve a cargar la página en el navegador.

Mantén TextEdit en modo de edición de código

Al volver a abrir el archivo, quizá veas el contenido con formato en lugar del código fuente. Apple documenta dos opciones: usa Archivo > Abrir, haz clic en Mostrar opciones y selecciona Ignorar comandos de texto enriquecido; o activa Mostrar archivos HTML como código HTML en lugar de texto con formato en TextEdit > Ajustes > Abrir y guardar. Apple: Trabajar con documentos HTML en TextEdit en Mac

Comprueba las rutas completas con el ejemplo

A continuación se muestra el esquema que debería aparecer. Las etiquetas son marcadores de posición neutros; sus posiciones determinan los números.

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

Este ejemplo comprueba tres transiciones distintas. Node D inicia un tercer nivel bajo Node C. Node F retoma el segundo nivel después de que termina esa rama. Node G retoma el nivel superior, y su primer elemento secundario empieza en 2.1. Un recorrido determinista del árbol de muestra confirmó estas rutas esperadas; el ejemplo no se renderizó en un navegador durante la preparación.

Por qué importa cada regla CSS

El reinicio se aplica tanto a .outline como a .outline ol. Cada lista anidada necesita una nueva instancia de outline-section; reiniciar solo la lista externa no crearía un conteo separado para cada profundidad. Incrementarlo en cada elemento de la lista hace avanzar la instancia actual. MDN: Uso de contadores CSS

La regla de visualización usa counters(outline-section, "."). La función en plural reúne todas las instancias activas con ese nombre. Si la sustituyes por counter(outline-section), en singular, solo se mostraría el valor del nivel actual y un elemento anidado aparecería como 1 en lugar de mostrar la ruta completa. MDN: función CSS counters()

El ejemplo elimina los marcadores nativos de la lista porque proporciona sus propios prefijos. Cada lista también tiene role="list": MDN documenta que Safari puede omitir de su árbol de accesibilidad las listas con list-style-type: none si no se incluye este atributo. Consérvalo al añadir otra lista anidada. MDN: propiedad CSS list-style-type

Edita el esquema sin romper su estructura

Coloca cada <ol> anidado dentro del <li> que contiene la rama. Por ejemplo, Node C contiene su lista secundaria antes de la etiqueta de cierre </li> de Node C. Una lista anidada no debe ser hija directa de otra lista ordenada. MDN: elemento HTML de lista ordenada

Para una prueba práctica de edición, añade un elemento nuevo justo antes de Node C. Su nueva ruta debería ser 1.2; Node C debería pasar a ser 1.3; y Node D y Node E deberían pasar a ser 1.3.1 y 1.3.2. Node G debería seguir siendo 2. Estos cambios esperados se desprenden de la jerarquía del ejemplo y sirven para comprobar que la numeración sigue la estructura de las ramas.

Para mover una rama, mueve el elemento completo que la contiene, incluidas sus listas anidadas y la etiqueta de cierre. Si mueves solo la etiqueta, sus elementos secundarios se quedarán atrás. Para crear un cuarto nivel, repite la estructura de lista anidada existente dentro del elemento correspondiente; no escribas otro número en la etiqueta.

Mantén una sola lista secundaria por rama cuando quieras que sus elementos formen una secuencia continua. En esta implementación, crear otra lista secundaria hermana inicia otro reinicio, por lo que la numeración local vuelve a empezar. El ejemplo de MDN muestra este reinicio con listas anidadas separadas bajo un mismo elemento. MDN: Uso de contadores CSS

Diagnostica la numeración incorrecta en un orden práctico

Empieza por la estructura, sigue con las reglas de los contadores y termina con la presentación. Cambiar la sangría no puede reparar un nivel de anidamiento ausente.

Lo que ves Qué revisar Corrección para este ejemplo
Todos los elementos anidados muestran un solo número La función en content Usa counters() en plural con el punto como separador.
Todos los elementos hermanos empiezan en 1 El selector de reinicio Reinicia los contadores en las listas, no en cada elemento.
Aparecen números nativos junto a las rutas completas La regla de estilo de lista Aplica list-style-type: none a las listas externas y anidadas.
Una rama tiene un prefijo inesperado La ubicación de su lista anidada Mantén la lista secundaria dentro del elemento que la contiene.
Otra lista en otra parte también muestra prefijos El alcance del selector del contador Mantén el prefijo .outline en las reglas.

Comprueba también si se ha ocultado algún elemento. Las operaciones de contadores CSS no se ejecutan en elementos que no generan una caja, incluidos los elementos con display: none. En cambio, visibility: hidden sigue generando una caja y, por tanto, puede afectar al conteo. Decide expresamente si un elemento omitido debe ocupar una posición. W3C: Contadores en elementos que no generan cajas

¿Y si necesito números de inicio personalizados?

Este ejemplo usa deliberadamente un contador personalizado que empieza en cero y se incrementa hasta uno. Los atributos HTML como start, reversed y value de un elemento de lista controlan la numeración nativa de listas ordenadas; las reglas personalizadas outline-section que se muestran aquí no leen esos atributos. Por lo tanto, añadir solo start="4" no hace que el prefijo mostrado por este ejemplo empiece en 4. Estándar HTML: listas ordenadas y elementos de lista

Si necesitas numeración discontinua o ramas en orden descendente, define ese requisito antes de adaptar esta hoja de estilos. Mantén la ruta mostrada coherente con los valores previstos para la lista ordenada, en lugar de añadir atributos que la visualización personalizada ignora.

Decide si los números son presentación o contenido del documento

Los prefijos de este tutorial son contenido generado por CSS. Son adecuados para un esquema visual, pero las referencias esenciales requieren consideración adicional: MDN señala que el contenido añadido mediante ::before no está disponible de forma fiable para los lectores de pantalla. Añadir role="list" conserva el reconocimiento de la lista; no garantiza que se anuncie cada ruta generada. MDN: pseudoelemento CSS ::before

Si una ruta completa debe formar parte del texto real —por ejemplo, en una exportación de texto sin formato—, inclúyela como texto en el documento o genérala durante la exportación. Esto cambia las tareas de mantenimiento: las ediciones también deben actualizar esas rutas guardadas. No dependas de un prefijo visual para proporcionar texto esencial en todos los formatos de salida.

Para un esquema visual local, termina comprobando las nueve rutas de muestra, insertando un elemento hermano y confirmando que la rama afectada se renumera como se espera. Cuando esas comprobaciones pasen en tu navegador, sustituye las etiquetas ficticias y conserva el anidamiento y el orden del código fuente.

Fuentes