Cómo hacer que una lista numerada en HTML comience por un número determinado

Si trabajas con HTML, tarde o temprano vas a necesitar listas. Y no solo para enumerar cosas sin más: a veces toca empezar una lista numerada desde un valor concreto, cambiar el estilo de la numeración, invertir el orden o incluso personalizar las viñetas con CSS. Parece poca cosa, pero es una de esas tareas de maquetación y semántica que conviene tener bien dominadas.

En las próximas líneas verás de forma clara y sin rodeos cómo funcionan las listas en HTML (ordenadas, desordenadas y de descripción), qué atributos y propiedades tienes disponibles y cómo usarlos con cabeza. Además, incluimos ejemplos prácticos con start, value, reversed y contadores CSS para cubrir los casos de uso más comunes y los menos obvios.

Qué es exactamente una lista en HTML y por qué importa

HTML ofrece tres tipos de listas: ordenadas (<ol>), desordenadas (<ul>) y de descripción (<dl>). Si trabajas con otras herramientas, también puedes consultar cómo agregar listas en PowerPoint. Elegir la correcta no es solo cuestión de estética; afecta a la semántica del documento y a cómo los usuarios, el SEO y las tecnologías de asistencia entienden el contenido. En una lista ordenada hay un orden implícito; en una desordenada, ese orden no existe; en una de descripción se mapea un término (<dt>) con su definición (<dd>).

De fábrica, los navegadores aplican ciertos estilos por defecto: <ul> y <ol> traen margin vertical y padding-left, <dd> suele desplazar su contenido a la derecha, y los <li> no tienen márgenes propios. Estos valores influyen en la alineación y la separación, así que es habitual ajustarlos con CSS para mantener un ritmo vertical consistente con el resto de la página.

Listas ordenadas (<ol>): estructura y numeración básica

Una lista ordenada se crea con <ol> … </ol> y elementos <li> dentro. Por defecto la numeración es 1, 2, 3… y así sucesivamente. Si lo prefieres, puedes optar por letras (A, B, C) o números romanos (I, II, III) usando el atributo type.

El atributo type admite varios valores: «1» (decimal), «a» (alfabético minúsculas), «A» (alfabético mayúsculas), «i» (romano minúsculas) y «I» (romano mayúsculas). Esto se aplica a toda la lista y es una forma rápida de definir el sistema de numeración sin tirar de CSS.

<ol type="A">
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

En el ejemplo anterior, cada elemento irá precedido por A, B, C, y así sucesivamente. Recuerda que la numeración es puramente representacional: el orden lo dictan los <li> en el HTML, no el número mostrado en pantalla.

Empezar la lista desde un número específico: start y value

Hay dos enfoques nativos para controlar el punto de partida de una lista numerada: start en <ol> y value en <li>. start fija el primer valor de la secuencia; value permite asignar un número concreto a un elemento individual, reiniciando a partir de ahí la progresión.

Si necesitas que la lista arranque en 30, utiliza start=»30″. Si solo quieres alterar un elemento concreto (por ejemplo, saltar a 65 a mitad de la lista), usa value=»65″ en ese <li>. Ambos atributos regresaron con HTML5 tras haber sido desaprobados en HTML 4.01 strict, así que hoy son válidos y muy útiles.

<!-- Arrancar en 30 -->
<ol start="30">
  <li>Treinta</li>
  <li>Treinta y uno</li>
  <li>Treinta y dos</li>
</ol>

<!-- Saltar a 65 en el segundo elemento -->
<ol>
  <li>Primero</li>
  <li value="65">Segundo</li>
  <li>Tercero</li>
</ol>

Una ventaja clara de estos atributos es que la numeración sigue funcionando incluso si falla el CSS, lo que asegura una experiencia robusta en navegadores antiguos o entornos con estilos desactivados.

Numeración inversa: el atributo reversed

Cuando quieres contar hacia atrás, HTML5 incorpora el atributo reversed en <ol>. Con él, la lista se numera de mayor a menor sin necesidad de hacks adicionales. Puedes dejarlo como booleano o con valor «reversed»; ambas formas funcionan en los navegadores modernos.

<ol reversed>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ol>

Este patrón es muy práctico para rankings, timelines que van de lo reciente a lo antiguo o listados en los que el orden descendente tiene sentido. Es un atributo semántico, así que comunica claramente la intención del autor del documento.

Personalizar la numeración con CSS: contadores y ::before

Si lo tuyo es el control total del aspecto, puedes sustituir los marcadores nativos por contadores CSS y generar la “viñeta” numérica con ::before. Este método permite aplicar tipografías, fondos, tamaños y formatos más complejos que la numeración estándar.

La idea base es reiniciar un contador en el <ol>, incrementar en cada <li> y pintar el valor con content: counter(item). Al mismo tiempo, desactivas la viñeta del navegador con list-style:none para no duplicar los marcadores.

ol { counter-reset: item; }
ol li { list-style: none; padding: 4px 8px; }
ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  display: inline-block;
  background: #323232;
  color: #fbfbfb;
  font: bold 16px Arial, Verdana;
  padding: 0 4px;
  margin: 0 6px 0 0;
}

Este enfoque es potente, pero tiene un detalle importante: los contadores CSS no “conocen” start ni value. Es decir, si en el HTML arrancas en 45, el contador seguirá contando desde 1 salvo que lo ajustes manualmente con counter-reset.

Para sincronizar el contador con el valor deseado, puedes resetearlo en línea, restando una unidad al número de inicio. Por ejemplo, si el tercer <li> debe ser 45, aplicas counter-reset: item 44; al propio elemento o al <ol> correspondiente.

<ol>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li value="45" style="counter-reset: item 44;">Tercer ítem</li>
  <li>Cuarto ítem</li>
</ol>

Funciona, sí, pero es una solución de compromiso: obliga a duplicar la lógica (HTML y CSS) y complica el mantenimiento. Si no necesitas un estilo de número muy especial, suele ser preferible delegar la numeración en el navegador y trabajar con list-style-type para el aspecto básico.

Como curiosidad histórica, hubo quien añadió compatibilidad para IE6/IE7 dejando list-style:decimal con un asterisco de hack heredado y generando la apariencia con ::before. A día de hoy, salvo que tengas un caso ultra legado, no necesitas hacks para navegadores tan antiguos.

Listas desordenadas (<ul>): viñetas y personalización

Una lista desordenada define elementos relacionados sin jerarquía ordinal y es conceptualmente parecida a listas en otras aplicaciones, como listas desplegables en Excel. Por defecto aparece con un punto «disc», pero puedes cambiar su viñeta con list-style-type: none (sin viñeta), disc (rellena), circle (hueca) o square (cuadrada).

<ul style="list-style-type: square;">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>

Además, controlas dónde se pinta la viñeta con list-style-position: outside (por defecto, fuera del cuadro del <li>) o inside (la viñeta queda dentro del bloque, alineada con el texto). Esto afecta a la alineación y al comportamiento en varias líneas.

ul { list-style-position: inside; }

Si quieres una imagen personalizada, existe list-style-image, aunque su control es limitado. Es más flexible usar propiedades de background (background-image, background-position, background-size, no-repeat) sobre el <li> con padding suficiente para que la imagen no se superponga al texto.

ul.custom { list-style: none; padding-left: 20px; }
ul.custom li {
  background-image: url("/ruta/a/tu-vineta.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 16px 16px;
  padding-left: 24px;
}

También puedes usar la propiedad abreviada list-style para agrupar tipo, imagen y posición en una sola declaración (por ejemplo, list-style: square inside;). Si incluyes image y type, el type actúa de «plan B» si la imagen no carga.

Listas de descripción (<dl>): términos y definiciones

Las listas de descripción sirven para asociar pares término–definición, como un glosario o una carta de restaurante. Se estructuran con <dl> (lista), <dt> (término) y <dd> (definición). Por defecto, el navegador aplica margen a <dd> para desplazarlo respecto al término.

<dl>
  <dt>Pizpireta</dt>
  <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  <dt>Pulular</dt>
  <dd>Abundar y bullir en un lugar.</dd>
</dl>

Si prefieres un aspecto distinto, ajusta márgenes y tipografía con CSS. A nivel semántico, cuando realmente representas términos y definiciones, <dl> es la etiqueta correcta; si solo quieres un listado visual, <ul> o <ol> con CSS pueden ser opciones más sencillas.

Comportamiento por defecto del navegador (espaciado y tipografía)

Los estilos de agente de usuario suelen aplicar a <ul> y <ol> un margin-top/bottom de ~1em y padding-left de ~40px, mientras que <dl> hereda márgenes similares y <dd> añade margin-left. Para integrar listas con párrafos y titulares, conviene igualar tamaños y line-height de forma coherente.

html { font-size: 62.5%; } /* 1rem = 10px aproximado */
body { font-family: system-ui, sans-serif; }
p, ul, ol, dl { font-size: 1.6rem; margin: 1.6rem 0; }
li, dd { line-height: 1.6; }
dt { font-weight: 700; }

Con estos ajustes, los bloques mantienen un ritmo vertical estable y evitas que unas listas parezcan «más juntas» o «más sueltas» que el resto del contenido. Es un detalle sutil, pero marca la diferencia en la lectura.

Listas anidadas y buenas prácticas

Es totalmente válido anidar listas dentro de elementos <li>, independientemente del tipo. Lo importante es que cada sublista esté correctamente envuelta en su elemento padre y que no olvides colocar los <li> dentro de la lista anidada. No hay un límite práctico de niveles, pero por legibilidad conviene no excederse.

<ul>
  <li>Carnívoro
    <ul>
      <li>León</li>
      <li>Buitre</li>
    </ul>
  </li>
  <li>Herbívoro
    <ul>
      <li>Vaca</li>
      <li>Cabra</li>
    </ul>
  </li>
</ul>

Cuando anidas listas ordenadas, puedes cambiar type en la sublista para evitar confusión visual (por ejemplo, números en el nivel 1 y letras en el nivel 2). Si usas contadores CSS, recuerda que cada lista puede reiniciar su propio contador para no mezclar secuencias.

Enlaces dentro de listas y un ejemplo de menú de navegación

Es frecuente convertir una lista desordenada en una navegación. Cada <li> contiene un <a> y con CSS eliminas la viñeta y alineas los elementos. Con flexbox, el resultado es moderno y accesible sin complicaciones, manteniendo una semántica limpia.

<nav>
  <span class="logo">Logo</span>
  <ul class="menu">
    <li><a href="#/home">Inicio</a></li>
    <li><a href="#/products">Productos</a></li>
    <li><a href="#/about">Sobre nosotros</a></li>
  </ul>
</nav>

nav { background: #273032; color: #fff; padding: 10px; display: flex; gap: 16px; align-items: center; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; }
.menu > li { margin: 0; }
.menu a { color: #ffc0cb; text-decoration: none; }

Este patrón aprovecha que una lista es, conceptualmente, un grupo de enlaces relacionados. Quitar las viñetas y disponerlos en línea con flex hace que la navegación sea predecible y adaptable a distintos tamaños de pantalla.

CSS abreviado para listas y opciones de viñeta

La propiedad abreviada list-style te deja definir en una línea el tipo, la posición y la imagen de la viñeta, en el orden que quieras. Por ejemplo: list-style: square inside; o list-style: none; si vas a generar una viñeta personalizada con background o ::before.

/* Equivalentes */
ol { list-style-type: upper-roman; list-style-position: outside; list-style-image: none; }
ol { list-style: upper-roman outside; }

Recuerda que si incluyes image y type a la vez, el type sirve como alternativa de respaldo por si falla la carga de la imagen. Esto aporta resiliencia y mantiene la legibilidad en situaciones no ideales.

Compatibilidad, HTML4.01 vs HTML5 y recomendaciones

Durante una etapa, start y type en <ol> y value en <li> se consideraron obsoletos (HTML 4.01 strict). En HTML5 regresan y, a día de hoy, su uso es correcto y está bien soportado por navegadores modernos. Si trabajas con documentos muy antiguos, revisa el DOCTYPE y ajusta según el contexto.

Para estilizar las viñetas, CSS es preferible frente a atributos HTML cuando el objetivo es solo visual. Pero si necesitas que una lista empiece por un número concreto o cuente hacia atrás, los atributos semánticos (start, reversed, value) son la opción más clara y resistente, dejando el formato fino a cargo de CSS.

Casos prácticos para empezar una lista en un número determinado

Imagina una paginación dividida en secciones distintas en la misma página. Puedes usar start para continuar la numeración donde se quedó el bloque anterior, o aplicar value en el primer elemento del segundo bloque para mantener una continuidad lógica sin complicarte en el back-end.

<ol start="11">
  <li>Artículo 11</li>
  <li>Artículo 12</li>
  <li>Artículo 13</li>
</ol>

En listados editoriales, tablas de contenidos o rankings, arrancar en un número alto refuerza el contexto («segunda parte», «top 50–26»). Con reversed puedes crear un top descendente sin reordenar el HTML, y con value introducir saltos cuando la lógica del documento lo requiere.

Cuando usar contadores CSS y cómo evitar sorpresas

Recurrir a contadores CSS tiene sentido cuando necesitas decorar el marcador con estilos que la numeración nativa no te ofrece: fondos, bordes, tipografías especiales, formato mixto. También cuando quieres numeraciones no estándar combinadas con otras decoraciones.

Eso sí, recuerda que si mezclas start/value con contadores CSS tendrás que sincronizar manualmente el counter-reset. Es fácil olvidar restar una unidad o dejar una regla in-line en el HTML. Si tu prioridad es la semántica y la robustez, apóyate en la numeración nativa y limita los contadores a casos en los que la estética lo justifique de verdad.

Una estrategia intermedia es no suprimir la viñeta nativa, pero esconderla visualmente y usar ::marker o ::before para reforzar el estilo. Aun así, la coherencia entre marcador real y “marcador decorativo” exige cuidado para no duplicar información a lectores de pantalla.

Accesibilidad y semántica de las listas

Las listas ayudan a tecnologías de asistencia a anunciar el número de elementos y el rol de cada uno. Evita construir listas “falsas” solo con saltos de línea o separadores; y no uses listas para lo que no lo es (por ejemplo, maquetar columnas). Para glosarios y pares término–definición, <dl> comunica la relación de forma más precisa que una lista genérica con <ul>.

Si cambias el orden visual con CSS (por ejemplo, invertido o reordenado), revisa que el orden en el DOM siga un flujo lógico. Y cuando crees menús con <ul>, mantén enlaces claros, foco visible y roles adecuados si decides añadir ARIA (sin abusar).

Para arrancar una lista numerada en un número concreto: usa start en <ol>; para fijar saltos específicos: value en <li>; para contar hacia atrás: reversed. Si quieres letras o romanos: type. Para viñetas de <ul> y <ol> personalizadas: list-style-type, y si necesitas imágenes, mejor background-* con padding. Y cuando busques numeraciones “de diseño” sofisticadas, considera contadores CSS sabiendo que no “leen” start/value.

Las listas pueden parecer sencillas, pero son una base fundamental de la maquetación. Con estos recursos podrás adaptarlas a casi cualquier escenario sin perder semántica, accesibilidad y control visual.