Etiqueta HTML <li>
Ejemplo
Una lista HTML ordenada (<ol>) y otra desordenada (<ul>):
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <li>etiqueta define un elemento de la lista.
La <li>etiqueta se usa dentro de listas ordenadas ( <ol> ), listas desordenadas ( <ul> ) y en listas de menú ( <menu> ).
En <ul> y <menu>, los elementos de la lista generalmente se mostrarán con viñetas.
En <ol>, los elementos de la lista generalmente se mostrarán con números o letras.
Sugerencia: use CSS para diseñar listas .
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Atributos globales
La <li>etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <li>etiqueta también es compatible con los atributos de eventos en HTML .
Más ejemplos
Ejemplo
Uso del atributo de valor en una lista ordenada:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Ejemplo
Establecer diferentes tipos de estilo de lista (con CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Ejemplo
Crear una lista dentro de una lista (una lista anidada):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ejemplo
Cree una lista anidada más compleja:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
páginas relacionadas
Tutorial HTML: Listas HTML
Referencia HTML DOM: Objeto Li
Tutorial de CSS: Estilo de listas
Configuración predeterminada de CSS
La mayoría de los navegadores mostrarán el <li>elemento con los siguientes valores predeterminados:
li {
display: list-item;
}