Etiqueta `<li>`

La etiqueta <li> en HTML se utiliza para definir un elemento dentro de una lista. Esta etiqueta se emplea dentro de listas ordenadas (<ol>) y listas no ordenadas (<ul>), y se usa para envolver cada ítem o elemento de la lista.

Es fundamental recordar que los elementos <li> siempre deben estar dentro de una lista, ya sea ordenada (<ol>) o no ordenada (<ul>), ya que por sí sola la etiqueta <li> no tiene un significado completo. Esto es porque <li> es una etiqueta de contenedor de elementos de lista, y solo tiene sentido cuando está dentro de un contexto de lista.

¿Cómo usar la etiqueta `<li>` correctamente?

Cada vez que quieras agregar un nuevo ítem a una lista, deberás envolverlo con la etiqueta <li>. Este proceso es el mismo sin importar si estás trabajando con una lista ordenada o no ordenada. La única diferencia entre ambas es que en una lista ordenada los elementos estarán numerados automáticamente por el navegador, mientras que en una lista no ordenada se presentarán con viñetas (puntos).

Ejemplo de código

        
<ul>
    <li>
        Elemento de la lista 1
    </li>
    <li>
        Elemento de la lista 2
    </li>
    <li>
        Elemento de la lista 3
    </li>
</ul>
      
<ol>
    <li>
        Primer paso
    </li>
    <li>
        Segundo paso
    </li>
    <li>
        Tercer paso
    </li>
</ol>

En este ejemplo, mostramos cómo utilizar la etiqueta <li> dentro de una lista ordenada (<ol>) y una lista no ordenada (<ul>). En ambas listas, los elementos están correctamente rodeados por la etiqueta <li>.

Consideraciones importantes al usar `<li>`

No anidar etiquetas <li> directamente: Recuerda que la etiqueta <li> debe ser un elemento dentro de una lista. No debes poner una etiqueta <li> dentro de otra etiqueta <li>, ya que esto afectaría la estructura de la lista y la visualización en la página web.
El orden no importa en <ul>: En una lista no ordenada (<ul>), el orden de los elementos no tiene relevancia, ya que los elementos se mostrarán con viñetas o puntos. Sin embargo, en una lista ordenada (<ol>), los elementos serán numerados, lo que indica que existe un orden lógico o secuencial.
Usar las listas correctamente: Las listas son útiles para organizar contenido de manera visual y estructurada. No uses listas si el contenido no tiene una relación de agrupación o secuencia, ya que esto puede afectar la claridad y accesibilidad del documento.

Accesibilidad y SEO

La correcta utilización de listas es crucial para la accesibilidad web. Las tecnologías de asistencia, como los lectores de pantalla, pueden interpretar las listas correctamente si las etiquetas <ul> y <ol> están bien estructuradas. Esto mejora la navegación para usuarios con discapacidades visuales.

Además, las listas bien organizadas son valoradas por los motores de búsqueda, ya que facilitan la indexación del contenido. El uso adecuado de listas puede mejorar el SEO (optimización para motores de búsqueda) al proporcionar una estructura lógica para el contenido.

Resumen:

La etiqueta <li> define los elementos dentro de una lista.
Siempre debe estar dentro de una lista ordenada (<ol>) o no ordenada (<ul>).
Es importante no anidar etiquetas <li> dentro de otras etiquetas <li>.
Las listas ordenadas numeran los elementos, mientras que las listas no ordenadas los presentan con viñetas.
El uso adecuado de las listas contribuye a la accesibilidad web y al SEO.

Anterior Siguiente

Etiqueta <li>