W3docs
es
Iniciar sesión

Etiqueta HTML <li>

La etiqueta <li> define los elementos de lista en HTML. Descripción, atributos y ejemplos.

La etiqueta HTML <li> define un elemento individual dentro de una lista HTML. Es un elemento hijo de <ul> (lista no ordenada), <ol> (lista ordenada) o <menu>. En las listas no ordenadas y los menús, los elementos se muestran con un punto de viñeta por defecto. En las listas ordenadas, cada elemento recibe un número o letra a la izquierda que aumenta automáticamente.

Esta página cubre la sintaxis de <li>, el atributo value, cómo aplicar estilos a los marcadores de lista con CSS y notas de accesibilidad para lectores de pantalla.

Sintaxis

Un elemento de lista se escribe entre las etiquetas de apertura <li> y de cierre </li>:

<li>List item text</li>

<li> es un elemento de contenido de flujo: cada elemento comienza en una nueva línea y ocupa todo el ancho disponible.

En HTML5, la etiqueta de cierre </li> es opcional — el navegador cierra el elemento automáticamente cuando encuentra el siguiente <li> o el final de la lista padre. Sin embargo, incluir </li> sigue siendo recomendable para mejorar la legibilidad y evitar sorpresas en las herramientas.

Ejemplo de listas ordenadas y no ordenadas:

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>
Pruébalo tú mismo »

El atributo value

El atributo value establece el número ordinal de un elemento de lista. Solo funciona en elementos <li> dentro de una lista ordenada (<ol>) y se ignora en las listas no ordenadas.

Definir value no cambia únicamente ese elemento — la numeración continúa a partir de él. En el siguiente ejemplo, el primer elemento se fuerza a 5, por lo que los elementos siguientes se convierten automáticamente en 6 y 7:

5. Coffee
6. Tea
7. Coca Cola

Para cambiar solo el punto de inicio de toda la lista, se recomienda usar el atributo start en el elemento <ol>. Use value cuando necesite anular el número de un elemento específico en medio de una lista.

Peligro

El valor del atributo value debe ser un entero válido. Se permiten valores negativos.

Ejemplo del atributo value:

<!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>
Pruébalo tú mismo »

Aplicar estilos al marcador de elemento de lista

Para aplicar estilos al elemento <li>, puede usar las propiedades CSS list-style, list-style-type, list-style-image y list-style-position.

Ejemplo de estilo del marcador de 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>
Pruébalo tú mismo »

Puede reemplazar los puntos de viñeta con una imagen usando la propiedad CSS list-style-image.

Ejemplo de marcador con imagen:

Propiedad list-style-image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("https://api.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>
Pruébalo tú mismo »

La propiedad CSS list-style-position especifica si el marcador de lista debe aparecer dentro o fuera del cuadro del elemento de lista.

Ejemplo de posicionamiento interior y exterior de un marcador:

Propiedad list-style-position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .inside {
        list-style-position: inside;
      }
      .outside {
        list-style-position: outside;
      }
    </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>
Pruébalo tú mismo »

Atributos

AtributoValorDescripción
type1, A, a, I, i, disc, square, circleDefine el tipo de viñeta para listas ordenadas o no ordenadas. Este atributo está obsoleto en HTML5. Use las propiedades CSS list-style-type o list-style-image en su lugar.
valuenumberEspecifica el valor numérico del elemento de lista. Se pueden 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 evento.

Aplicar estilos a <li> con CSS

Además del marcador, puede aplicar estilos al cuadro del elemento como cualquier otro elemento. Use el selector de tipo li para alcanzar todos los elementos de lista, o limítelo a una lista específica con una clase o un selector descendente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* All list items on the page */
      li {
        padding: 8px;
        line-height: 1.6;
      }
      /* Only items inside lists with class "menu" */
      ul.menu > li {
        list-style: none;
        border-bottom: 1px solid #ddd;
      }
      /* Style the marker color separately */
      li::marker {
        color: #0a7cff;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </body>
</html>

El pseudoelemento ::marker aplica estilos a la viñeta o al número sin afectar el texto del elemento — muy útil para cambiar el color o el tamaño de los marcadores.

Accesibilidad

Los lectores de pantalla tratan las listas como un grupo: anuncian la lista, el número total de elementos y la posición de cada elemento (por ejemplo, "lista, 3 elementos, elemento 1"). Este contexto ayuda a los usuarios a comprender la estructura, por lo que conviene mantener los elementos relacionados dentro de un <ul> o <ol> en lugar de simular una lista con <div>s y saltos de línea.

Advertencia

Eliminar las viñetas con list-style: none puede hacer que VoiceOver de Safari deje de reconocer el elemento como una lista, por lo que el recuento de elementos ya no se anuncia. Si elimina los marcadores en menús de navegación, añada role="list" de vuelta al <ul> para preservar la semántica de lista.

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Etiquetas relacionadas

  • <ul> — lista no ordenada (con viñetas)
  • <ol> — lista ordenada (numerada)
  • <menu> — una lista de comandos o elementos de menú
  • Listas HTML — descripción general de todos los tipos de listas

Práctica

Práctica
¿Qué define la etiqueta HTML li?
¿Qué define la etiqueta HTML li?
Práctica
En una lista ordenada, ¿qué ocurre cuando se establece value=5 en el primer elemento li?
En una lista ordenada, ¿qué ocurre cuando se establece value=5 en el primer elemento li?
Was this page helpful?