La Etiqueta UL

Se utiliza para crear listas no ordenadas, es decir, listas donde los elementos no siguen un orden secuencial o numérico.

La etiqueta <ul> (Unordered List) en HTML se utiliza para crear listas no ordenadas, es decir, listas donde los elementos no siguen un orden secuencial o numérico. Estas listas se representan comúnmente con viñetas (como puntos o círculos) y son ideales para agrupar elementos relacionados visualmente. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica de una lista no ordenada incluye:

  • <ul>: Contenedor principal de la lista.

  • <li> (List Item): Elementos individuales de la lista.

Ejemplo:

<ul>
  <li>Manzana</li>
  <li>Plátano</li>
  <li>Naranja</li>
</ul>

Resultado:

  • Manzana

  • Plátano

  • Naranja

Atributos comunes (HTML4/Obsoletos en HTML5)

Aunque HTML5 desaconseja estos atributos (usa CSS en su lugar), es útil conocerlos:

Atributo Descripción
type Estilo de viñeta: disc (•), circle (◦), square (▪).
compact Reduce el espacio entre elementos (obsoleto).

Ejemplo (no recomendado):

<ul type="square">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Estilización con CSS

Reemplaza los atributos obsoletos con propiedades CSS para personalizar las viñetas:

ul {
  list-style-type: square;       /* Tipo de viñeta */
  list-style-image: url('icon.png'); /* Usa una imagen */
  padding-left: 20px;            /* Espaciado interno */
}

ul li {
  margin: 8px 0;                 /* Espacio entre elementos */
  color: #2ecc71;                /* Color del texto */
}

Ejemplo: Viñetas personalizadas

<ul style="list-style-type: '???? ';">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ul>

Resultado:

  • Primer Elemento.
  • Segundo Elemento.

Casos de uso comunes

a) Lista simple

<ul>
  <li>Café</li>
  <li>Té</li>
  <li>Agua</li>
</ul>

b) Lista anidada

<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Plátano</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Espinaca</li>
      <li>Zanahoria</li>
    </ul>
  </li>
</ul>

Resultado:

  • Frutas

    • Manzana

    • Plátano

  • Verduras

    • Espinaca

    • Zanahoria

c) Menú de navegación (con CSS)

<nav>
  <ul style="list-style: none; display: flex; gap: 20px;">
    <li><a href="#home">Inicio</a></li>
    <li><a href="#about">Acerca de</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

Accesibilidad

  • Semántica: <ul> ayuda a los lectores de pantalla a identificar listas.

  • ARIA: Para menús complejos, usa roles como role="menu" o role="navigation".

  • Evita abusar: No uses <ul> para estructuras que no son listas (mejor <div> o <nav>).

Diferencias entre <ul>, <ol> y <dl>

Etiqueta Propósito Marcador
<ul> Listas no ordenadas (viñetas). •, ◦, ▪, etc.
<ol> Listas ordenadas (números, letras). 1., A., i., etc.
<dl> Listas de definiciones (término + descripción). Sin marcadores.

Buenas prácticas

  1. Usa CSS para estilos: Evita atributos como type o compact.

  2. Anidación clara: Indenta los elementos hijos para mejor legibilidad.

  3. Jerarquía semántica: Usa <ul> solo para listas, no para maquetación general.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    ul {
      list-style-type: none; /* Elimina viñetas */
      padding-left: 0;
    }
    ul li {
      padding: 10px;
      margin: 5px 0;
      background: #f8f9fa;
      border-left: 4px solid #007bff;
    }
    ul li:hover {
      background: #e9ecef;
    }
  </style>
</head>
<body>
  <h2>Lista de tareas</h2>
  <ul>
    <li>Estudiar HTML</li>
    <li>Practicar CSS</li>
    <li>Crear un proyecto web</li>
  </ul>
</body>
</html>

Errores comunes

Usar <ul> para maquetación:

<ul>
  <li>Encabezado</li>
  <li>Contenido principal</li>
</ul>

Olvidar cerrar <li>:

<ul>
  <li>Elemento 1
  <li>Elemento 2
</ul>

Conclusión

La etiqueta <ul> es fundamental para:

  • Crear listas no ordenadas con viñetas.

  • Mejorar la organización visual de elementos relacionados.

  • Mantener la semántica y accesibilidad en el contenido.

Recuerda:

  • Usa CSS para personalizar viñetas (list-style-type, list-style-image).

  • Combínala con <nav> y ARIA para menús accesibles.

  • Prioriza la claridad y estructura lógica en tus listas.

¡Ahora puedes crear listas profesionales y bien estructuradas con <ul>!