Etiqueta HTML <li>
La etiqueta HTML <li> define elementos individuales en una Lista HTML. Las etiquetas <ul> y <ol> definen listas desordenadas y ordenadas, respectivamente. La etiqueta <menu> define el menú contextual. Los elementos de la lista suelen mostrarse con viñetas en los menús y listas desordenadas. En las listas ordenadas, suelen mostrarse con un número o una letra a la izquierda.
Sintaxis
La etiqueta <li> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<li>) y cierre (</li>). La etiqueta <li> es un elemento de contenido de flujo; comienza en una nueva línea y ocupa todo el ancho disponible.
Ejemplo de listas ordenadas y desordenadas:
Lista de menú — Ejemplo de la etiqueta HTML <li> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Ordered list</p>
<ol>
<li>Appetizers</li>
<li>Main Course</li>
<li>Salads</li>
</ol>
<p>Unordered list</p>
<ul>
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>El atributo value
El atributo value especifica un número para un elemento de la lista. Solo se utiliza con el elemento <li> dentro de una lista ordenada. Ten en cuenta que en HTML5 moderno, se prefiere el atributo start en el elemento <ol> para controlar el número de inicio de la lista.
peligro
El valor del atributo
valuedebe ser un número entero válido.
Ejemplo del atributo value:
Etiqueta HTML <li> con la propiedad list-style-type|Ejemplo|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<ol>
<li value="5">Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Estilizar el marcador del elemento de lista
Para estilizar el elemento <li>, puedes usar las propiedades CSS list-style, list-style-type, list-style-image y list-style-position.
Ejemplo de estilización del marcador del elemento de lista:
propiedad list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h1>The list-style-type property</h1>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Puedes reemplazar las viñetas con una imagen utilizando la propiedad CSS list-style-image.
Ejemplo de marcador de imagen:
propiedad list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://www.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>La propiedad CSS list-style-position especifica si el marcador de la lista debe aparecer dentro o fuera del cuadro del elemento de lista.
Ejemplo de posicionamiento interno y externo de un marcador:
propiedad list-style-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "inside".</p>
<ul class="inside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Here the list-style is positioned "outside".</p>
<ul class="outside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
type | 1, A, a, I, i, disc, square, circle | Define el tipo de viñeta para listas ordenadas o desordenadas. Este atributo está obsoleto en HTML5. En su lugar, utiliza las propiedades CSS list-style-type o list-style-image. |
value | number | Especifica el valor numérico del elemento de la lista. Puedes usar valores negativos. Solo funciona con el elemento <li> dentro de una lista ordenada. |
La etiqueta <li> admite los Atributos Globales y los Atributos de Eventos.
Cómo estilizar una etiqueta HTML <li>
{
"tag_name": "li"
}Práctica
¿Qué define la etiqueta HTML <li>?