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.
Tabla de contenidos
Descripción
El elemento li
representa a un ítem en una lista, ya sea ordenada (elemento ol
) o no ordenada (elemento ul
).
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
- 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.
- Agrega el aceite, la harina y la sal a la mezcla.
- Selecciona la opción "Básico" o "Pan Blanco".
- Presiona "Comenzar".
El elemento li
puede también ser parte de una barra de menu
, representando un comando que el usuario puede ejecutar o activar.
<li><button onclick="nuevo()">Nuevo...</button></li>
<li><button onclick="abrir()">Abrir...</button></li>
<li><button onclick="guardar()">Guardar</button></li>
<li><button onclick="guardarcomo()">Guardar como...</button></li>
</menu>
El ejemplo anterior simula la barra de menú de un editor de texto, proporcionando los comandos usuales de "Nuevo...", "Abrir...", "Guardar" y "Guardar como...".
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.
- Como el señor guste
- Una ballena de especie desconocida
- 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.