Saltar al contenido principal

Ejercicio práctico 4: Listas Ordenadas y Desordenadas

En este ejercicio práctico aprenderás a crear Listas Ordenadas y Desordenadas en HTML, comprendiendo su sintaxis, estructura y aplicaciones para organizar contenido de forma clara y jerárquica.

Actividad​

Crea un documento HTML con una lista ordenada (<ol>) y una lista desordenada (<ul>).

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Listas</title>
  </head>
  <body>
    <h1>Lista Ordenada</h1>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
    <h2>Lista Desordenada</h2>
    <ul>
      <li>Elemento A</li>
      <li>Elemento B</li>
      <li>Elemento C</li>
    </ul>
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Listas anidadas — menú con submenú​

Una de las aplicaciones más comunes de las listas es crear menús de navegación con subniveles.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Menú de Navegación</title>
  </head>
  <body>
    <h1>Menú Principal</h1>
    <ul>
      <li>
        Inicio
      </li>
      <li>
        Servicios
        <ul>
          <li>Desarrollo Web</li>
          <li>Diseño Gráfico</li>
          <li>
            Marketing Digital
            <ul>
              <li>SEO</li>
              <li>Redes Sociales</li>
              <li>Email Marketing</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        Productos
        <ul>
          <li>Software</li>
          <li>Hardware</li>
        </ul>
      </li>
      <li>Contacto</li>
    </ul>
  </body>
</html>

Regla de oro: los <li> anidados siempre van dentro de otro <ul> u <ol>. La estructura siempre es ul/ol > li > ul/ol > li.

Variante 2: Atributos avanzados de <ol>​

Las listas ordenadas tienen atributos que permiten personalizar el tipo de numeración y el punto de inicio.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Atributos de ol</title>
  </head>
  <body>
    <h1>Tipos de Listas Ordenadas</h1>

    <h2>Numeración por defecto (números)</h2>
    <ol>
      <li>Primer paso</li>
      <li>Segundo paso</li>
      <li>Tercer paso</li>
    </ol>

    <h2>Letras mayúsculas</h2>
    <ol type="A">
      <li>Opción A</li>
      <li>Opción B</li>
      <li>Opción C</li>
    </ol>

    <h2>Numeración romana</h2>
    <ol type="I">
      <li>Capítulo I</li>
      <li>Capítulo II</li>
      <li>Capítulo III</li>
    </ol>

    <h2>Empezar desde el número 5</h2>
    <ol start="5">
      <li>Paso 5</li>
      <li>Paso 6</li>
      <li>Paso 7</li>
    </ol>

    <h2>Orden inverso</h2>
    <ol reversed>
      <li>Tercer lugar</li>
      <li>Segundo lugar</li>
      <li>Primer lugar</li>
    </ol>
  </body>
</html>
  • type: "1" (default), "A", "a", "I", "i".
  • start: número desde el cual empezar.
  • reversed: invierte el orden (HTML5).

Variante 3: Listas de definición (<dl>, <dt>, <dd>)​

Existe un tercer tipo de lista menos conocido pero muy útil para glosarios y FAQs.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Glosario HTML</title>
  </head>
  <body>
    <h1>Glosario de Términos HTML</h1>

    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language: lenguaje de marcado para estructurar páginas web.</dd>

      <dt>CSS</dt>
      <dd>Cascading Style Sheets: lenguaje para dar estilo visual a documentos HTML.</dd>

      <dt>JavaScript</dt>
      <dd>Lenguaje de programación que agrega interactividad a las páginas web.</dd>

      <dt>DOM</dt>
      <dd>Document Object Model: representación estructurada del documento HTML.</dd>
    </dl>
  </body>
</html>
  • <dl>: contenedor de la lista de definición.
  • <dt>: término a definir.
  • <dd>: definición del término.

Mini-desafío: Ponelo a prueba​

Creá un documento HTML que contenga:

  • Un menú de navegación (<ul>) con 3 ítems, donde uno tenga un submenú de 2 opciones
  • Una lista ordenada de 5 pasos que empiece desde el número 10 usando start="10"
  • Una lista de definición con 3 términos web que conozcas

No copies y pegues: escribí el código desde cero aplicando lo que aprendiste en las variantes.

Errores comunes con listas HTML​

ErrorPor qué es un problema
Poner <li> directamente dentro de <body> sin <ul> u <ol><li> debe ser siempre hijo directo de <ul>, <ol> o <menu>
Anidar <li> dentro de <li> sin un <ul>/<ol> intermedioLa estructura correcta es li > ul/ol > li, no li > li
No cerrar <li> correctamenteAunque HTML5 lo permite, mezclar etiquetas abiertas y cerradas causa inconsistencias
Usar <br> en vez de una listaSi tenés varios ítems en secuencia, usá listas, no saltos de línea
Usar type en <ul>type está obsoleto en <ul>; usá CSS list-style-type en su lugar

Preguntas frecuentes​

¿Cuándo uso <ol> vs <ul>?​

Usá <ol> cuando el orden importa (pasos de una receta, ranking, instrucciones secuenciales). Usá <ul> cuando el orden no es relevante (menú de navegación, lista de características, ítems de un checklist). La diferencia semántica es importante para accesibilidad y SEO.

¿Se pueden combinar listas ordenadas y desordenadas?​

Sí, y es muy común. Podés tener una <ul> que contenga un <li> con una <ol> adentro, o viceversa. La clave es respetar la estructura: el <ul> u <ol> anidado siempre va dentro de un <li> del nivel superior.

Practicá con DivZone AI

¿Listas dominadas? Creá una página de recetas o menú con DivZone AI y analizá cómo el generador organiza listas ordenadas y desordenadas en un proyecto web real. ¡Es la mejor forma de afianzar lo aprendido!