Docs ejecutables de HTML: Listas en HTML

Q: ¿Cómo hago viñetas en HTML?

Usa una lista desordenada: con un por viñeta, por ejemplo Leche Huevos . El navegador dibuja una viñeta delante de cada elemento y sangra la lista.

Q: ¿Cómo quito las viñetas de una lista en HTML?

Pon list-style: none en el en el CSS. Pon también padding-inline-start: 0 (o padding: 0) para quitar la sangría que el navegador añade para las viñetas.

Q: ¿Cómo empiezo una lista ordenada en otro número?

Usa el atributo start: numera el primer elemento con 5. reversed cuenta hacia atrás, y value en un fija el número de ese elemento y de los siguientes.

Q: ¿Cómo se hace una lista anidada en HTML?

Pon el u interior dentro de un de la lista exterior, después del texto de ese elemento. Una lista colocada directamente dentro de otro , entre elementos , no es válida.

Listas en HTML: ul, ol y li

HTML tiene dos listas principales. <ul> (lista desordenada) muestra viñetas, y <ol> (lista ordenada) muestra números. Cada elemento es un <li> (elemento de lista).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Usa <ol> cuando el orden significa algo (pasos, clasificaciones, un índice) y <ul> cuando no. Los lectores de pantalla anuncian las dos como listas con un recuento, como "lista, 3 elementos", y por eso una lista real es mejor que líneas que empiezan con un "•" o un "1." escritos a mano.

Una lista solo puede contener directamente elementos <li>. Todo lo demás, incluidos encabezados, párrafos y otras listas, va dentro de un <li>.

Estilos de viñeta

list-style-type en el <ul> cambia la viñeta. El pseudoelemento ::marker da estilo a la propia viñeta o número, por separado del texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Un valor de texto usa ese texto como viñeta. "\2713 " es una marca de verificación seguida de un espacio: el primer espacio solo termina el escape \2713. ::marker solo acepta algunas propiedades, sobre todo color, font-size y otras propiedades de fuente, lo que cubre la petición habitual de "viñetas de colores" sin marcado extra.

Listas ordenadas: números, letras y números romanos

<ol> tiene atributos para su numeración:

Atributo	Ejemplo	Resultado
`type`	`type="a"`	a, b, c (también funcionan `A`, `i`, `I` y `1`)
`start`	`start="5"`	Empieza a contar en 5
`reversed`	`reversed`	Cuenta hacia atrás
`value` (en `<li>`)	`<li value="10">`	Este elemento es el 10, los siguientes continúan desde ahí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type está bien en HTML porque las letras pueden tener significado ("elige la opción B"). Para cambios puramente visuales, el CSS list-style-type: upper-alpha o lower-roman hace lo mismo.

Listas anidadas

Una sublista va dentro del <li> al que pertenece, después del texto de ese elemento. Los navegadores cambian la viñeta en cada nivel: disco, luego círculo, luego cuadrado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Fíjate en dónde va </li>: el elemento "Frontend" se cierra solo después de su sublista. Cerrarlo antes del <ul> pone la sublista directamente dentro del <ul> exterior, lo que no es válido aunque se vea casi igual.

Las listas ordenadas se anidan del mismo modo, y la numeración vuelve a empezar en 1 en cada sublista. Para números como 1.1 y 1.2 hacen falta contadores de CSS.

Listas de descripción: dl, dt y dd

Una lista de descripción empareja términos con sus descripciones: un glosario, los detalles de un pedido, parejas tipo preguntas frecuentes. <dt> es el término y <dd> la descripción:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Un término puede tener varios <dd>, y varios <dt> pueden compartir un <dd>. Los navegadores sangran <dd> por defecto; la regla margin de arriba lo quita. Para datos con varias columnas, una tabla encaja mejor.

Listas sin viñetas: menús y listas horizontales

Los menús de navegación son listas de enlaces. Quita las viñetas con list-style: none y la sangría con padding: 0, y luego coloca los elementos en fila con flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Para los lectores de pantalla la lista sigue siendo una lista ("navegación, lista, 3 elementos"). Una excepción: Safari con VoiceOver puede perder el significado de lista cuando se quitan las viñetas. Si el recuento importa a tus usuarios, añade role="list" al <ul>.

Espaciado por defecto

Los navegadores dan a las listas un margen superior e inferior de 1em y las sangran con padding-inline-start: 40px, que es donde se colocan las viñetas. El padding está en el lado inicial, así que en los idiomas de derecha a izquierda las viñetas y la sangría pasan al otro lado automáticamente. Si quitas el padding, las viñetas salen fuera de la caja de la lista, donde pueden cortarse; o mantienes algo de padding o usas list-style-position: inside.

Errores comunes

<li> sin una lista padre. Tiene que estar dentro de <ul>, <ol> o <menu>.
Una lista anidada fuera de su <li>. Pon la sublista dentro del elemento al que pertenece.
Texto u otras etiquetas directamente dentro de <ul>, como <ul><p>Note</p><li>...</li></ul>. Muévelos a un <li> o fuera de la lista.
Escribir viñetas o números a mano con • y <br>. Los lectores de pantalla oyen un párrafo, no una lista.
list-style: none sin padding: 0, lo que deja una misteriosa sangría de 40 píxeles.
Usar <ol> por el aspecto. Si el orden no importa, usa <ul> y dale estilo.

Preguntas frecuentes

¿Cómo hago viñetas en HTML?

Usa una lista desordenada: <ul> con un <li> por viñeta, por ejemplo <ul><li>Leche</li><li>Huevos</li></ul>. El navegador dibuja una viñeta delante de cada elemento y sangra la lista.

¿Qué diferencia hay entre ul y ol?

<ul> es una lista desordenada, con viñetas, para elementos cuyo orden no importa. <ol> es una lista ordenada, con números, para pasos y clasificaciones donde el orden sí importa. Las dos contienen elementos <li>.

¿Cómo quito las viñetas de una lista en HTML?

Pon list-style: none en el <ul> en el CSS. Pon también padding-inline-start: 0 (o padding: 0) para quitar la sangría que el navegador añade para las viñetas.

¿Cómo empiezo una lista ordenada en otro número?

Usa el atributo start: <ol start="5"> numera el primer elemento con 5. reversed cuenta hacia atrás, y value en un <li> fija el número de ese elemento y de los siguientes.

¿Cómo se hace una lista anidada en HTML?

Pon el <ul> u <ol> interior dentro de un <li> de la lista exterior, después del texto de ese elemento. Una lista colocada directamente dentro de otro <ul>, entre elementos <li>, no es válida.

Conceptos relacionados