Curso HTML 7.1 Listas desordenadas (ul) y elementos li

7.1 Listas desordenadas (`<ul>`) y elementos `<li>`

La lista desordenada (<ul>) es un contenedor semántico para agrupar elementos de lista (<li>) sin un orden específico. Su uso es muy común para menús de navegación, conjuntos de elementos relacionados, listados de características o pasos que no requieren una secuencia numérica.

Estructura básica

Una <ul> debe contener únicamente elementos <li> como hijos directos. Cada <li> representa un ítem dentro de la lista.

  
  
    Primer elemento
   
    Segundo elemento
  
    Tercer elemento

Listas anidadas

Para crear subniveles o jerarquías, basta con incluir otra <ul> (o <ol>) dentro de un <li>. Esto resulta útil en menús desplegables, índices de contenido o árboles de categorías.

  
    Frutas
      
        Manzana
        Banana
        Cereza
      
    
    Verduras
      
        Zanahoria
        Espinaca
      
    
    Granos

Atributos y globales

El elemento <ul> acepta todos los atributos globales de HTML5 (como id, class, data-*, aria-*, etc.). En versiones antiguas se utilizaba el atributo type para cambiar el marcador (disco, círculo, cuadrado), pero está obsoleto. Actualmente se controla vía CSS.

Semántica y accesibilidad

Por defecto, las listas desordenadas llevan un marcador de estilo viñeta. Para usuarios de tecnologías asistivas:

Usar role='list' en <ul> si el contexto exige explicitar la función de lista.
Usar role='listitem' en cada <li> sólo cuando se modifique el comportamiento por defecto.
Añadir aria-label o aria-labelledby si la lista necesita una descripción adicional.

Ejemplo con accesibilidad

  
  
    Inicio
    Productos
      
      
        Producto A
        Producto B
      
    
    Contacto

Listas como componentes UI

Las <ul> se emplean para:

Menús de navegación general y móviles.
Grillas de iconos o botones (puesta en fila con CSS).
Listados de características, pasos de un proceso, FAQs, etc.

Prácticas recomendadas

Acción	Recomendación
Marcadores por defecto	No intentar cambiar el tipo con atributos obsoletos; usar CSS (p.ej. `list-style-type`).
Contenido dentro de `<li>`	Sólo texto o elementos en línea/bloque. Evitar anidar contenidos malos semánticamente.
Listas forzadas con `display`	No usar `display: inline-block` para simular una lista si no lo es; mantener semántica.
Marcadores personalizados	Utilizar imágenes de fondo o pseudoelementos `::before` en CSS, no etiquetas `<img>` dentro de `<li>`.

Resumen

El elemento <ul> y sus <li> son pilares de la estructura semántica en HTML. Facilitan la accesibilidad, organización y maquetación de contenidos sin orden secuencial. Aprender sus buenas prácticas y posibilidades de anidamiento asegura listas claras, accesibles y fáciles de mantener.