Etiqueta li en HTML

¿Qué es la etiqueta <li> en HTML?

La etiqueta <li> es una etiqueta de HTML5 que se utiliza para crear elementos de lista en un documento HTML. La etiqueta <li> representa un elemento de lista en una lista ordenada (<ol>) o una lista no ordenada (<ul>).

La sintaxis básica de la etiqueta <li> es la siguiente:


<ul>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 2</li>
  <li>Elemento de lista 3</li>
</ul>

Lenguaje del código: HTML, XML (xml)

Aquí, la etiqueta <ul> se utiliza para crear una lista no ordenada y la etiqueta <li> se utiliza para crear cada elemento de la lista. El contenido de cada elemento de la lista se escribe entre las etiquetas de apertura y cierre de <li>.

La etiqueta <li> también puede estar anidada dentro de otras etiquetas de HTML, como <div>, <section>, <article>, etc. Esto puede ser útil para crear diseños más complejos y estructurados.

Es importante tener en cuenta que los elementos de la lista deben estar dentro de una lista ordenada o no ordenada. La etiqueta <ol> se utiliza para crear una lista ordenada y la etiqueta <ul> se utiliza para crear una lista no ordenada.

La etiqueta <li> también se puede utilizar con atributos para agregar información adicional a los elementos de la lista. Por ejemplo, el atributo “value” se puede utilizar con la etiqueta <li> en una lista ordenada para especificar el valor numérico de cada elemento de la lista.

Ejemplo de uso

1) 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

2) Otro ejemplo de cómo utilizar la etiqueta <li> en HTML para crear una lista ordenada de frutas:


<!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

Frutas
Manzanas
Plátanos
Peras
Naranjas
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 solo 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>

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.

Más ejemplos

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: CSS (css)

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: CSS (css)

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.

Curso de HTML Desde Cero

Inscríbete Ahora