¿Como funciona el comando en HTML5: 'li'?

La etiqueta <li> en HTML5 se utiliza para definir un ítem dentro de una lista. Es válida tanto en listas ordenadas (<ol>) como en listas desordenadas (<ul>). A continuación, se detallan los atributos comunes de la etiqueta <li> y su uso con ejemplos.

Atributos de <li>

1. Global Attributes: Los elementos <li> pueden utilizar todos los atributos globales que son aplicables a la mayoría de los elementos HTML. Estos incluyen:

   • id: Define un identificador único para el elemento.
   • class: Especifica una o varias clases CSS para el elemento.
   • style: Permite aplicar estilos CSS en línea al elemento.
   • title: Proporciona una información adicional que se muestra generalmente como un tooltip cuando se pasa el cursor sobre el elemento.
   • lang: Especifica el idioma del contenido del elemento.
   • dir: Indica la dirección del texto del contenido (por ejemplo, ltr para izquierda a derecha, rtl para derecha a izquierda).
   • data-*: Atributos personalizados que pueden almacenar datos adicionales sobre el elemento, donde * es el nombre de los datos.

2. Atributos Específicos de <li>:

   • value: Este atributo se usa en listas ordenadas (<ol>) para especificar el valor numérico de un elemento de la lista. Específicamente útil si se desea iniciar un elemento de lista en una posición específica que no siga la secuencia natural.

   <ol>
      <li value="5">Elemento 5</li>
      <li>Elemento 6</li>
   </ol>

Uso de <li> en HTML5: Ejemplos Sencillos

Ejemplo 1: Lista Desordenada

Una lista desordenada usa <ul> como contenedor principal y <li> para cada ítem:

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

Ejemplo 2: Lista Ordenada

Una lista ordenada usa <ol> como contenedor principal y <li> para cada ítem:

<ol>
    <li>Primer ítem</li>
    <li>Segundo ítem</li>
    <li>Tercer ítem</li>
</ol>

Ejemplo 3: Lista Anidada

Este ejemplo muestra cómo una lista puede contener otra lista dentro de un elemento <li>:

<ul>
    <li>Elemento A
        <ul>
            <li>Subelemento A1</li>
            <li>Subelemento A2</li>
        </ul>
    </li>
    <li>Elemento B</li>
</ul>

Ejemplo 4: Usando Atributos Globales

Utilización de algunos atributos globales (class, id y style) en los ítems de la lista:

<ul>
    <li id="item1" class="highlight" style="color: red;">Elemento Rojo</li>
    <li id="item2" class="highlight" style="font-weight: bold;">Elemento Negrita</li>
</ul>

Estos ejemplos cubren las aplicaciones básicas del elemento <li> y muestran cómo se puede implementar dentro de diferentes tipos de listas, así como la utilización de atributos globales para mejorar y personalizar el contenido y comportamiento de cada ítem de la lista.