Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 5 · Semana 2

Listas

Hoy · Hoja de ruta

  1. 1. Aprende: Los tres tipos de lista, qué relación expresa cada uno y cómo se anidan correctamente.
  2. 2. Haz: Interpreta información en bruto y decide con qué se marca cada parte.
  3. 3. Comprueba: Resuelve el reto de la lista anidada.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Por qué no se elige un h3 por su tamaño visual?
  2. Escribe una jerarquía válida con un título principal y dos apartados.
  3. Corrige <p>Texto <strong>importante</p></strong>.

Tres listas para tres relaciones

Lista no ordenada

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Lista ordenada

<ol>
    <li>Crear el proyecto</li>
    <li>Escribir HTML</li>
    <li>Validar</li>
</ol>

Aquí el orden tiene significado: no puedes validar antes de escribir.

La prueba que distingue ul de ol

Reordena mentalmente los elementos. Si la información sigue siendo cierta, es ul. Si deja de serlo, es ol.

No decide el hecho de que se vean números: los números son apariencia, y con CSS se pueden poner y quitar.

Listas anidadas

<ul>
    <li>
        Hardware

        <ul>
            <li>Portátiles</li>
            <li>Monitores</li>
        </ul>
    </li>

    <li>
        Software
    </li>
</ul>

Fíjate bien en la jerarquía: el segundo <ul> está dentro del primer <li>, no detrás de él. Es el error más común de la sesión. Si lo sacas fuera, estás diciendo que «Portátiles» es hermano de «Hardware» en lugar de una parte suya.

Listas de descripción

Para pares de término y definición:

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje utilizado para estructurar contenido web.</dd>

    <dt>CSS</dt>
    <dd>Lenguaje utilizado para definir su presentación.</dd>
</dl>

dt es el término y dd su descripción. Un mismo dt puede tener varios dd, y varios dt pueden compartir un dd.

Vista previaTres estructuras, tres representaciones
<ul> · sin orden
  • HTML
  • CSS
  • JavaScript
<ol> · secuencia
  1. Crear el proyecto
  2. Escribir HTML
  3. Validar
<dl> · términos
HTML
Estructura el contenido.
CSS
Define su presentación.

La viñeta o el número ayudan a leer, pero la diferencia importante es la relación que declara cada elemento.

Lista Se usa cuando Ejemplo
<ul> El orden no cambia el significado Los componentes que vende la tienda
<ol> El orden es el significado Los pasos para tramitar una devolución
<dl> Cada elemento es un término y su definición El glosario de la ficha técnica

Tarea 3 · De texto plano a estructura

Recibes esta información sin ningún marcado:

Componentes de un ordenador
Procesador
Memoria RAM
Almacenamiento SSD

Pasos para instalar un sistema operativo
Descargar la imagen oficial
Crear el medio de instalación USB
Arrancar el equipo desde el USB
Completar el asistente de instalación
Reiniciar y actualizar controladores

Esto no es «escribir etiquetas»: es interpretar la información. Tu trabajo:

  1. Decide qué es título de bloque y con qué nivel de encabezado, teniendo en cuenta dónde va a vivir dentro de tu página.
  2. Decide qué bloque es ul y cuál es ol, y escribe en un comentario por qué, aplicando la prueba de reordenar.
  3. Añade debajo una <dl> que defina tres conceptos: CPU, RAM y SSD.
Estoy atascado · no sé si los componentes van ordenados

Aplica la prueba de forma literal. Con «Memoria RAM, Almacenamiento SSD, Procesador», la afirmación de que esos son los componentes de un ordenador se mantiene con independencia del orden. Con «Reiniciar, Descargar la imagen, Arrancar desde el USB», en cambio, ya no describe una instalación posible.

Reto 2 · Los módulos de DAW (10 min)

Representa esta estructura con el mínimo HTML razonable y semánticamente correcto:

DAW
 ├ Lenguajes de Marcas
 ├ Programación
 └ Bases de Datos
Ver respuesta del Reto 2

Es una relación de pertenencia sin orden, o sea una lista dentro de otra lista:

<ul>
  <li>DAW
    <ul>
      <li>Lenguajes de Marcas</li>
      <li>Programación</li>
      <li>Bases de Datos</li>
    </ul>
  </li>
</ul>

La lista anidada va dentro del <li> de DAW. Si la sacas fuera, estás diciendo que los tres módulos son hermanos de DAW en lugar de partes suyas.

Ahora tú · Crea productos.html

Crea la segunda página de tu proyecto. Debe contener:

  • Un encabezado principal y al menos dos niveles de encabezado.
  • Varios párrafos.
  • Una lista no ordenada.
  • Una lista ordenada, donde el orden importe de verdad.
  • Una lista anidada.
  • Al menos dos elementos de significado textual de la sesión anterior.

Todavía no la enlazaremos con la portada: eso es la sesión que viene.

Checkpoint · fin de la sesión 5

  • Sabes aplicar la prueba de reordenar para decidir entre ul y ol.
  • Sabes dónde va exactamente una lista anidada.
  • Conoces dl, dt y dd.
  • Tienes productos.html con las tres clases de lista.

Antes de cerrar · 2 minutos, sin mirar

  1. Da la prueba de una frase que distingue ul de ol.
  2. ¿Dónde va el <ul> de una lista anidada?
  3. ¿Para qué sirve <dl>?
Ver respuestas

1 · Si al reordenar los elementos la información sigue siendo cierta, es ul; si deja de serlo, es ol.

2 · Dentro del <li> del que depende, no detrás de él.

3 · Para pares de término y descripción: glosarios, fichas técnicas, listas de definiciones.