Qué es la etiqueta li y cómo usarla en HTML

La etiqueta <li> es una de las más utilizadas en HTML, ya que permite crear listas de elementos ordenados o desordenados. En este artículo, te explicaremos qué es la etiqueta <li>, cómo usarla correctamente y algunos ejemplos prácticos.

¿Qué es la etiqueta <li>?

La etiqueta <li> significa list item o elemento de lista en inglés. Se usa para definir cada uno de los elementos que forman parte de una lista, ya sea ordenada o desordenada. La etiqueta <li> siempre debe ir dentro de una etiqueta <ol> (para listas ordenadas) o <ul> (para listas desordenadas).

Cómo usar la etiqueta <li>

La etiqueta <li> tiene la siguiente sintaxis:

<li>contenido del elemento</li>

El contenido del elemento puede ser texto, imágenes, enlaces, otras listas o cualquier otro elemento HTML. La etiqueta <li> puede tener algunos atributos opcionales, como value, type o class, que sirven para modificar el aspecto o el comportamiento de la lista.

Ejemplos de la etiqueta <li>

A continuación, te mostramos algunos ejemplos de cómo usar la etiqueta <li> en HTML:

Ejemplo 1: Lista desordenada con texto

<ul>
  <li>Manzana</li>
  <li>Pera</li>
  <li>Banana</li>
</ul>

Este código genera una lista desordenada con tres elementos de texto, cada uno con un punto como marcador:

• Manzana
• Pera
• Banana

Ejemplo 2: Lista ordenada con números

<ol>
  <li>Paso 1: Abrir el navegador</li>
  <li>Paso 2: Ingresar a Google</li>
  <li>Paso 3: Buscar lo que quieras</li>
</ol>

Este código genera una lista ordenada con tres elementos de texto, cada uno con un número como marcador:

1. Paso 1: Abrir el navegador
2. Paso 2: Ingresar a Google
3. Paso 3: Buscar lo que quieras

Ejemplo 3: Lista anidada con letras

<ol type="A">
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Pera</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Zanahoria</li>
      <li>Espinaca</li>
      <li>Brócoli</li>
    </ul>
  </li>
</ol>

Este código genera una lista ordenada con dos elementos de texto, cada uno con una letra como marcador, y dentro de cada elemento hay una lista desordenada con tres elementos de texto, cada uno con un punto como marcador:

A. Frutas

• Manzana
• Pera
• Banana B. Verduras
• Zanahoria
• Espinaca
• Brócoli

Esperamos que este artículo te haya sido útil para entender qué es la etiqueta <li> y cómo usarla en HTML. Si quieres aprender más sobre HTML, te recomendamos visitar los siguientes recursos .