HTML li

La etiqueta <li> en HTML es utilizada para representar un elemento de una lista. Se utiliza dentro de una lista ordenada (<ol>) o una lista desordenada (<ul>). Cada elemento de la lista debe ir dentro de una etiqueta <li>.

Por ejemplo:

<ul> <li>Manzanas</li> <li>Plátanos</li> <li>Peras</li> </ul>
Lenguaje del código: HTML, XML (xml)

La etiqueta <li> también puede contener otros elementos HTML, como enlaces, imágenes o incluso otras listas anidadas.

La etiqueta <li> tiene pocas opciones de estilo, pero se pueden utilizar atributos para aplicar estilos específicos a cada elemento de la lista.

Ejemplo:

<li style="color: red;">Manzanas</li> <li style="color: blue;">Plátanos</li>
Lenguaje del código: HTML, XML (xml)

En general, la etiqueta <li> es una herramienta esencial para crear listas en HTML y es muy fácil de utilizar.

Ejemplo de uso

Aquí te dejo un ejemplo de cómo utilizar la etiqueta <li> en HTML para crear una lista desordenada de frutas:

<!DOCTYPE html> <html> <head> <title>Ejemplo de lista de frutas</title> </head> <body> <h1>Frutas</h1> <ul> <li>Manzanas</li> <li>Plátanos</li> <li>Peras</li> <li>Naranjas</li> <li>Kiwis</li> </ul> </body> </html>
Lenguaje del código: HTML, XML (xml)

El código anterior crea una página HTML con un título “Frutas” y una lista desordenada de frutas. Cada fruta está dentro de una etiqueta <li>, lo que indica que es un elemento de la lista. Al visualizar el código en un navegador, se vería así:

Frutas

  • Manzanas
  • Plátanos
  • Peras
  • Naranjas
  • Kiwis
<!DOCTYPE html> <html> <head> <title>Ejemplo de lista ordenada de frutas</title> </head> <body> <h1>Frutas</h1> <ol> <li>Manzanas</li> <li>Plátanos</li> <li>Peras</li> <li>Naranjas</li> <li>Kiwis</li> </ol> </body> </html>
Lenguaje del código: HTML, XML (xml)

Al visualizar el código en un navegador, se vería así:

Frutas

  1. Frutas
  2. Manzanas
  3. Plátanos
  4. Peras
  5. Naranjas
  6. Kiwis

Espero que esto te ayude a entender cómo utilizar la etiqueta <li> en HTML para crear listas.

Atributos

La etiqueta <li> en HTML tiene varios atributos, pero los más importantes son:

  • value: Este atributo es utilizado para especificar el valor numérico de un elemento de una lista ordenada. Por ejemplo, si quieres que el primer elemento de una lista ordenada tenga el valor “3”, podrías utilizar el atributo value de la siguiente manera:
<ol> <li value="3">Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
Lenguaje del código: HTML, XML (xml)
  • type: Este atributo es utilizado para especificar el tipo de marcador utilizado en una lista ordenada. Los valores válidos son: “1” (números), “a” (letras minúsculas), “A” (letras mayúsculas), “i” (números romanos minúsculos) y “I” (números romanos mayúsculos). Por ejemplo, si quieres que una lista ordenada utilice letras minúsculas como marcadores, podrías utilizar el atributo type de la siguiente manera:
<ol type="a"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
Lenguaje del código: HTML, XML (xml)
  • style: Este atributo es utilizado para especificar estilos CSS para un elemento de la lista. Por ejemplo, si quieres que el primer elemento de una lista tenga el color de fondo rojo, podrías utilizar el atributo style de la siguiente manera:
<ul> <li style="background-color: red;">Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>
Lenguaje del código: HTML, XML (xml)
  • class y id: Estos atributos son utilizados para especificar una clase o id CSS para un elemento de la lista, lo que permite aplicar estilos específicos a ese elemento mediante un archivo CSS externo.

Ten en cuenta que existen algunos atributos obsoletos o que no son compatibles con todos los navegadores, así que es importante asegurarse de utilizar sólo los atributos compatibles con las versiones de navegadores que te interesen soportar.

Atributos globales

Además de los atributos mencionados anteriormente, también existen algunos atributos globales que se pueden utilizar en cualquier etiqueta HTML, incluyendo la etiqueta <li>. Estos atributos incluyen:

  • accesskey: Este atributo es utilizado para especificar una tecla de acceso rápido para un elemento de la lista. Por ejemplo, si quieres que el primer elemento de una lista tenga la tecla de acceso rápido “1”, podrías utilizar el atributo accesskey de la siguiente manera:
<ul> <li accesskey="1">Primer elemento</li> <li accesskey="2">Segundo elemento</li> <li accesskey="3">Tercer elemento</li> </ul>
Lenguaje del código: HTML, XML (xml)
  • tabindex: Este atributo es utilizado para especificar el orden de tabulación de un elemento de la lista. Por ejemplo, si quieres que el primer elemento de una lista sea el primer elemento en el orden de tabulación, podrías utilizar el atributo tabindex de la siguiente manera:
<ul> <li tabindex="1">Primer elemento</li> <li tabindex="2">Segundo elemento</li> <li tabindex="3">Tercer elemento</li> </ul>
Lenguaje del código: HTML, XML (xml)
  • title: Este atributo es utilizado para especificar un título o descripción adicional para un elemento de la lista. Por ejemplo, si quieres que el primer elemento de una lista tenga un título adicional «Fruta roja», podrías utilizar el atributo title de la siguiente manera:
<ul> <li title="Fruta roja">Primer elemento</li> <li title="Fruta amarilla">Segundo elemento</li> <li title="Fruta verde">Tercer elemento</li> </ul><span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)

Ten en cuenta que estos atributos pueden tener un impacto en la accesibilidad y usabilidad de tu sitio web, así que es importante utilizarlos de manera adecuada.

Espero que esto te ayude a entender mejor los diferentes atributos disponibles para la etiqueta <li> en HTML y cómo utilizarlos.

Ejemplos de atributos

Aquí te doy algunos ejemplos de cómo utilizar los atributos de la etiqueta <li> en HTML:

  • Utilizando el atributo value:
<ol> <li value="3">Primer elemento</li> <li value="5">Segundo elemento</li> <li value="7">Tercer elemento</li> </ol>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo type:
<ol type="i"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo style:
<ul> <li style="color: blue;">Primer elemento</li> <li style="color: green;">Segundo elemento</li> <li style="color: red;">Tercer elemento</li> </ul>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo class:
<ol> <li class="destacado">Primer elemento</li> <li>Segundo elemento</li> <li class="destacado">Tercer elemento</li> </ol>
Lenguaje del código: HTML, XML (xml)

Y en el archivo CSS asociado:

.destacado { font-weight: bold; text-decoration: underline; }
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo id:
<ul> <li id="primero">Primer elemento</li> <li>Segundo elemento</li> <li id="tercero">Tercer elemento</li> </ul>
Lenguaje del código: HTML, XML (xml)

Y en el archivo CSS asociado:

#primero { color: blue; } #tercero { font-style: italic; }
Lenguaje del código: HTML, XML (xml)

Ten en cuenta que estos son solo algunos ejemplos, y puedes utilizar estos atributos de varias maneras para darle estilos a tus elementos de lista.