La Etiqueta LI

Se utiliza para representar un elemento de una lista dentro de listas ordenadas o no ordenadas.

La etiqueta <li> (abreviatura de list item) se utiliza para representar un elemento de una lista dentro de listas ordenadas (<ol>) o no ordenadas (<ul>). Es un componente fundamental para organizar información de manera jerárquica o secuencial.

Sintaxis básica

La etiqueta <li> siempre debe estar anidada dentro de <ul> (lista no ordenada) o <ol> (lista ordenada).
Ejemplo básico:

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

Tipos de listas

Lista no ordenada (<ul>)

Muestra elementos con viñetas (puntos, círculos, etc.) por defecto:

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

Resultado:

  • Café

  • Té

  • Agua

Lista ordenada <ol>

Muestra elementos numerados o con letras:

<ol>
  <li>Precalentar el horno</li>
  <li>Mezclar ingredientes</li>
  <li>Hornear por 30 minutos</li>
</ol>

Resultado:

  1. Precalentar el horno

  2. Mezclar ingredientes

  3. Hornear por 30 minutos

Características avanzadas

Atributo value

(solo en <ol>)

Cambia el número de inicio de un elemento:

<ol>
  <li>Primer paso</li>
  <li value="5">Segundo paso (empieza en 5)</li>
  <li>Tercer paso (continúa en 6)</li>
</ol>

Resultado:

  1. Primer paso

  2. Segundo paso

  3. Tercer paso

Listas anidadas

Puedes crear sublistas dentro de un <li>:

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

Resultado:

  • Frutas

    • Manzana

    • Plátano

  • Verduras

Personalización con CSS

Cambia el estilo de las viñetas o números:

/* Lista no ordenada con viñetas cuadradas */
ul.custom {
  list-style-type: square;
}

/* Lista ordenada con números romanos */
ol.roman {
  list-style-type: upper-roman;
}

Ejemplo HTML:

<ul class="custom">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

<ol class="roman">
  <li>Primero</li>
  <li>Segundo</li>
</ol>

Usos comunes

  • Menús de navegación.

  • Índices o tablas de contenido.

  • Pasos de un tutorial.

  • Listas de características o elementos.

Errores comunes

Usar <li> fuera de <ul> u <ol>:

Incorrecto:

<li>Elemento suelto</li>

Olvidar cerrar la etiqueta:

Aunque HTML5 permite omitir </li>, es buena práctica cerrarla:

<!-- Correcto -->
<li>Elemento</li>

Confundir <ul> y <ol>:

Usa <ul> para elementos sin orden y <ol> para secuencias.

Mejores prácticas

  • Accesibilidad:

    • Usa <ul> para elementos independientes (ej: menús).

    • Usa <ol> para pasos o prioridades.

  • Semántica:

    • Para listas de definiciones, usa <dl>, <dt>, y <dd>.

  • Estilos:

    • Evita el atributo obsoleto type (ej: <ul type="square">). Usa CSS en su lugar.

Ejemplo avanzado: Menú de navegación

Combina <li> con CSS para crear un menú horizontal:

<nav>
  <ul class="menu">
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>

<style>
  .menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    background: #f0f0f0;
    padding: 10px;
  }
  .menu li a {
    text-decoration: none;
    color: #333;
  }
</style>

Casos prácticos

Lista de tareas (TODO list):

<ul>
  <li><input type="checkbox"> Comprar leche</li>
  <li><input type="checkbox"> Llamar al médico</li>
</ul>

Tabla de contenidos:

<ol>
  <li><a href="#cap1">Capítulo 1</a></li>
  <li><a href="#cap2">Capítulo 2</a></li>
</ol>

Con este tutorial, podrás crear listas estructuradas, accesibles y visualmente atractivas. ¡Experimenta con estilos y anidamientos para organizar tu contenido! ????