Apuntes html

HTML nunca falla, solo se ve raro.

Listas

Las listas en HTML presentan información en forma ordenada, como tareas, rankings, o glosarios. Son ideales para presentar datos de forma clara y visual. También es frecuente su uso para menús de navegación. En esta lección veremos como crear tres tipos de listas: ordenadas (<ol>), no ordenadas (<ul>), y de definiciones (<dl>, para términos y descripciones).
Verás cómo usarlas con atributos HTML tradicionales, cómo mejorarlas con CSS, y cómo evitar errores comunes.

¿Qué son las listas?

Una lista es una forma de estructurar contenido en elementos relacionados, como una lista de compras o una lista de tareas. HTML ofrece tres tipos principales:

  • Ordenadas (<ol>): Numeradas o alfabéticas, para rankings o pasos (por ejemplo, "1. Levantarme, 2. Desayunar").
  • No ordenadas (<ul>): Con viñetas, para puntos sin orden (por ejemplo, "Leche, Pan, Huevos").
  • De definiciones (<dl>): Para términos y sus descripciones, como en un diccionario (por ejemplo, "HTML: Lenguaje de marcas").

Las listas pueden contener texto formateado (como <strong> o <em>), y anidarse para crear sublistas.

Listas ordenadas: <ol>

La etiqueta <ol> (ordered list) crea una lista numerada o alfabética, y cada elemento se define con <li> (list item). Su estructura es:

<ol>
  <li>Un portátil con 16 GB de RAM</li>
  <li>Suscripción a internet ultrarrápida</li>
  <li>Vacaciones en el Caribe</li>
  <li>Un año sabático para mi jefe</li>
</ol>

Esto se muestra como:

  1. Un portátil con 16 GB de RAM
  2. Suscripción a internet ultrarrápida
  3. Vacaciones en el Caribe
  4. Un año sabático para mi jefe

<ol> marca el inicio y fin de la lista numerada y <li> encierra cada elemento de la lista. El navegador añade números automáticamente (1, 2, 3...).

Atributos

type: Define el estilo de numeración (obsoleto):

- 1: Números (predeterminado, por ejemplo, 1, 2, 3).
- A: Letras mayúsculas (A, B, C).
- a: Letras minúsculas (a, b, c).
- I: Romanos mayúsculas (I, II, III).
- i: Romanos minúsculas (i, ii, iii).

start: Número inicial (por ejemplo, start="5" comienza en 5).

Nota: `type` y `start` están en desuso; usa CSS (`style="list-style-type: upper-roman"`).

        <ol type="A" start="3">
        <li>Comprar leche</li>
        <li>Hacer café</li>
        <li>Servir desayuno</li>
        </ol>

Resultado:

  • C. Comprar leche
  • D. Hacer café
  • E. Servir desayuno

Ejemplo con CSS

Para reemplazar type y start, usa style:

<ol style="list-style-type: upper-alpha;">
  <li style="counter-increment: list-item 2;">Comprar leche</li>
  <li>Hacer café</li>
  <li>Servir desayuno</li>
</ol>

Nota: counter-increment es avanzado; para novatos, basta con list-style-type.

Listas no ordenadas: <ul>

La etiqueta <ul> (unordered list) crea una lista con viñetas, y cada elemento usa <li>. Su estructura es:

<ul>
  <li>Un portátil con 16 GB de RAM</li>
  <li>Suscripción a internet ultrarrápida</li>
  <li>Vacaciones en el Caribe</li>
  <li>Un año sabático para mi jefe</li>
</ul>

Esto se muestra como:

  • Un portátil con 16 GB de RAM
  • Suscripción a internet ultrarrápida
  • Vacaciones en el Caribe
  • Un año sabático para mi jefe

<ul> marca el inicio y fin de la lista no numerada. Y <li> encierra cada elemento, y el navegador añade viñetas (por defecto, círculos rellenos).

Atributos

  type : Define el estilo de viñeta (obsoleto):

  - `disc`: Círculo relleno (predeterminado).
  - `circle`: Círculo vacío.
  - `square`: Cuadrado.
  • Nota: type está en desuso; usa CSS (style="list-style-type: square").

Ejemplo con atributos HTML

<ul type="square">
  <li>Leche</li>
  <li>Pan</li>
  <li>Huevos</li>
</ul>

Resultado:

  • Leche
  • Pan
  • Huevos

Ejemplo con CSS

<ul style="list-style-type: square;">
  <li>Leche</li>
  <li>Pan</li>
  <li>Huevos</li>
</ul>

Anidando listas

Puedes anidar listas dentro de otras para crear estructuras más complejas, como sublistas. La lista interna debe colocarse dentro de un elemento <li> de la lista externa. Por ejemplo:

<ul>
  <li>Un portátil con 16 GB de RAM
    <ol>
      <li>Procesador i7</li>
      <li>1 TB de SSD</li>
      <li>Pantalla 4K</li>
    </ol>
  </li>
  <li>Suscripción a internet ultrarrápida</li>
  <li>Vacaciones en el Caribe</li>
  <li>Un año sabático para mi jefe</li>
</ul>

Esto se muestra como:

  • Un portátil con 16 GB de RAM

    1. Procesador i7
    2. 1 TB de SSD
    3. Pantalla 4K

  • Suscripción a internet ultrarrápida

  • Vacaciones en el Caribe

  • Un año sabático para mi jefe

Puedes combinar listas numeradas y no numeradas, anidando tantas veces como necesites.

Nota: Cierre de etiquetas. Aunque HTML5 permite omitir </li> en algunos casos, siempre cierra las etiquetas <li> para evitar errores, especialmente en listas anidadas.

Recuerda que las listas <ol> y <ul> crean bloques separados, con saltos de línea antes y después, similares a <p> o <h1>. Por eso, no deben colocarse dentro de un párrafo (<p>). Esto es incorrecto:

<p>Estos son mis deseos: <ul><li>Portátil</li></ul></p>

Listas de definiciones: <dl>

La etiqueta <dl> (definition list) crea una lista de términos y sus descripciones, ideal para glosarios o FAQs. Usa:

  • <dt> (definition term): Término a definir.
  • <dd> (definition description): Descripción del término.

Estructura:

<dl>
  <dt>Término</dt>
  <dd>Descripción</dd>
</dl>

Uso

  • Correcto: Glosarios, FAQs, o descripciones (por ejemplo, sitios web y sus funciones).
  • Incorrecto: Usar <dl> para sangrar texto (obsoleto). En su lugar, usa CSS (style="margin-left: 20px").

Ejemplo con atributos HTML

<dl>
  <dt>ignit.xyz</dt>
  <dd>Sitio web con manuales de HTML, CSS y otros lenguajes.</dd>
  <dt>altavista</dt>
  <dd>Buscador web popular en los años 90.</dd>
</dl>

Resultado:

ignit.xyz
Sitio web con manuales de HTML, CSS y otros lenguajes.
altavista
Buscador web popular en los años 90.

Ejemplo completo con HTML

Aquí tienes una página que combina los tres tipos de listas:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Listas en HTML</title>
</head>
<body>
  <h1>Mis listas</h1>
  <h2>Tareas (no ordenada)</h2>
  <ul type="square">
    <li>Leche</li>
    <li>Pan</li>
    <li>Huevos</li>
  </ul>
  <h2>Pasos para el desayuno (ordenada)</h2>
  <ol type="A" start="3">
    <li>Comprar leche</li>
    <li>Hacer café</li>
    <li>Servir desayuno</li>
  </ol>
  <h2>Glosario web (definiciones)</h2>
  <dl>
    <dt>ignit.xyz</dt>
    <dd>Sitio web con manuales de HTML, CSS y otros lenguajes.</dd>
    <dt>altavista</dt>
    <dd>Buscador web popular en los años 90.</dd>
  </dl>
</body>
</html>

Ejemplo completo con CSS

El mismo ejemplo, pero usando CSS para reemplazar atributos obsoletos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Listas en HTML</title>
</head>
<body>
  <h1>Mis listas</h1>
  <h2>Tareas (no ordenada)</h2>
  <ul style="list-style-type: square;">
    <li>Leche</li>
    <li>Pan</li>
    <li>Huevos</li>
  </ul>
  <h2>Pasos para el desayuno (ordenada)</h2>
  <ol style="list-style-type: upper-alpha;">
    <li style="counter-increment: list-item 2;">Comprar leche</li>
    <li>Hacer café</li>
    <li>Servir desayuno</li>
  </ol>
  <h2>Glosario web (definiciones)</h2>
  <dl>
    <dt>ignit.xyz</dt>
    <dd style="margin-left: 20px;">Sitio web con manuales de HTML, CSS y otros lenguajes.</dd>
    <dt>altavista</dt>
    <dd style="margin-left: 20px;">Buscador web popular en los años 90.</dd>
  </dl>
</body>
</html>

Equivalencias:

  • type="square" → style="list-style-type: square".
  • type="A" start="3" → style="list-style-type: upper-alpha;" con counter-increment (opcional).
  • Sangrado de <dd> → style="margin-left: 20px" (aproximadamente).
TOP