Elemento li

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento li representa a un ítem en una lista, ya sea ordenada (elemento ol) o no ordenada (elemento ul), y un submenú en una barra de menu. En el último caso, el elemento li actúa como contenedor de cada submenú (compuesto por un button y un menu) en la barra de herramientas.

En la especificación de HTML5, el atributo value de este elemento está permitido únicamente en listas ordenadas (ol). Su uso en listas no ordenadas (ul) es inválido.

El atributo type de este elemento ha sido eliminado de HTML5 debido a su naturaleza visual. Los autores deberían reemplazar su funcionalidad con hojas de estilo.

Ejemplos

El siguiente ejemplo muestra un par de listas que corresponden a una receta, donde los ingresdientes se muestran en un formato no ordenado (ul) mientras que el procedimiento pertenece a una lista ordenada (ol).

<h1>Receta básica de pan para comenzar a usar tu máquina</h1>
<h2>Ingredientes</h2>
<ul>
  <li>1 taza de agua tibia</li>
  <li>2 cucharadas de azúcar blanco</li>
  <li>1 cubo de levadura fresca</li>
  <li>1/4 taza de aceite vegetal</li>
  <li>3 tazas de harina 000</li>
  <li>1 cucharada de sal</li>
</ul>
<h2>Procedimiento</h2>
<ol>
  <li>Coloca el agua, el azúcar y la levadura en la cavidad de la máquina de pan y deja que la levadura se disuelva y haga espuma por 10 minutos.</li>
  <li>Agrega el aceite, la harina y la sal a la mezcla.</li>
  <li>Selecciona la opción "Básico" o "Pan Blanco".</li>
  <li>Presiona "Comenzar".</li>
</ol>

Receta básica de pan para comenzar a usar tu máquina

Ingredientes

  • 1 taza de agua tibia
  • 2 cucharadas de azúcar blanco
  • 1 cubo de levadura fresca
  • 1/4 taza de aceite vegetal
  • 3 tazas de harina 000
  • 1 cucharada de sal

Procedimiento

  1. Coloca el agua, el azúcar y la levadura en la cavidad de la máquina de pan y deja que la levadura se disuelva y haga espuma por 10 minutos.
  2. Agrega el aceite, la harina y la sal a la mezcla.
  3. Selecciona la opción "Básico" o "Pan Blanco".
  4. Presiona "Comenzar".

El elemento li puede también ser parte de una barra de menu. En tal caso, actúa como contenedor de cada submenú en una estructura muy particular que se muestra a continuación. Para más información refiérete al elemento menu.

Las funciones declaradas en el siguiente ejemplo no están diseñadas para funcionar. Este ejemplo apunta solamente a probar la funcionalidad provista por los navegadores para los menús.

Hasta el 27/03/2015, el soporte provisto por los navegadores para el elemento menu es casi inexistente. Los autores tal vez tengan que recurrir a programas para lograr el mismo efecto en todos los navegadores, hasta que el soporte aumente.

<menu>
  <li>
    <button type="menu" value="Archivo" menu="filemenu">
    <menu id="filemenu" type="context">
      <menuitem label="Nuevo..." onclick="new()">
      <menuitem label="Abrir..." onclick="open()">
      <menuitem label="Guardar" onclick="save()">
      <menuitem label="Guardar como..." onclick="saveas()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edición" menu="editmenu">
    <menu id="editmenu" type="context">
      <menuitem label="Copiar" onclick="copy()">
      <menuitem label="Cortar" onclick="cut()">
      <menuitem label="Pegar" onclick="paste()">
    </menu>
  </li>
</menu>
  • El ejemplo anterior simula la barra de menú de un editor de texto, proporcionando los menúes usuales de "Archivo" y "Edición" junto con sus bien conocidas opciones.

    Atributos

    Atributos específicos

    value

    Un entero indicando el valor ordinal del ítem en la lista.

    Este atributo es únicamente aplicable cuando el ítem no se encuentra en listas no ordenadas (ul) y menus (menu). Su uso está permitido en listas ordenadas (ol) y el elemento template.

    Ejemplo

    <p>La lista ha sido reducida para mostrar sólo los capítulos relevantes del libro.</p>
    <ol type="I">
      <li value="3">Como el señor guste</li>
      <li value="7">Una ballena de especie desconocida</li>
      <li value="12">Todo por la electricidad</li>
    </ol>
    

    La lista ha sido reducida para mostrar sólo los capítulos relevantes del libro.

    1. Como el señor guste
    2. Una ballena de especie desconocida
    3. Todo por la electricidad

    type

    El tipo de símbolo a usar en la viñeta de este ítem. Los valores que este atributo puede tomar dependen del tipo de lista en la que es declarado. Para listas no ordenadas (ul), los tres valores posibles, insensibles a mayúsculas/minúsculas, son:

    • disc: un círculo relleno.
    • circle: un círculo sin relleno.
    • square: un cuadrado sin relleno.

    Para listas ordenadas (ol), los cinco posibles valores, insensibles a mayúsculas/minúsculas, son:

    • 1: enteros (1, 2, 3...).
    • a: letras minúsculas (a, b, c...).
    • A: letras mayúsculas (A, B, C...).
    • i: números romanos en minúsculas (i, ii, iii...).
    • I: números romanos en mayúsculas (I, II, III...).

    En HTML5 este atributo ha sido eliminado en favor de las hojas de estilo. Sin embargo, para listas ordenadas los autores pueden usar el atributo type del elemento ol.

    Ejemplo

    <li type="disc">25 clavos</li>
    

    Atributos globales

    Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

    Eventos

    Eventos globales

    Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.