# Lista en HTML: enumeraciones con etiquetas li-, ol- y ul-

Las listas en HTML presentan información y elementos seleccionados en un documento HTML en forma de lista. En función de los requisitos, puede tratarse de una lista ordenada, desordenada o de definición. Para su creación se utilizan las etiquetas de lista HTML `<li>`, `<ol>`, `<ul>` y `<dl>`.

## ¿Qué son las listas en HTML?

Las listas en HTML se utilizan en [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) para mostrar información y elementos de texto **en forma de lista estructurada y clara**. Dependiendo de los requisitos, el contenido puede organizarse como una lista ordenada con numeración o como una lista desordenada. Desde [HTML5](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html5/), existe también una tercera variante, las listas de definición, especialmente adecuadas para clasificar términos y sus respectivas definiciones.

Las listas en HTML son esenciales para el diseño variado y claro de las páginas web, con el fin de garantizar **una comunicación precisa, rápida y clara de la información o el contenido**. Esto se aplica a una simple enumeración, a una enumeración ascendente de información o a definiciones presentadas de forma clara y detallada.

## ¿Qué tipos de listas en HTML existen?

Como ya se ha mencionado, las listas pueden mostrarse en documentos HTML de varias formas. Mientras que las **listas ordenadas y desordenadas** se utilizan con mucha frecuencia y prácticamente no deberían faltar en ninguna página web, las **listas de definición**, también conocidas como Description Lists, se utilizan con mucha menos frecuencia. En las siguientes secciones, veremos con más detalle los distintos tipos de listas en HTML y su sintaxis.

### Listas ordenadas (Ordered Lists)

Una lista HTML ordenada se caracteriza por un contenido y unos elementos enumerados que se organizan y estructuran en una jerarquía deseada utilizando una **secuencia alfanumérica ascendente**. Esto permite una secuencia clara y bien pensada de la información. Para ello se utilizan: la [etiqueta HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) de apertura `<ol>`, la etiqueta de cierre `</ol>` y varios puntos `<li>...</li>` para las distintas entradas de la lista. Las listas ordenadas son adecuadas para mostrar, por ejemplo, listas clasificadas, instrucciones paso a paso o listas de preguntas.

La **sintaxis de las listas ordenadas** tiene el siguiente aspecto:

```html
<ol> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>Tercer elemento de la lista</li> 
<li>Cuarto elemento de la lista</li> 
<li>...</li> 
</ol>
```

El resultado es el siguiente:

[![Imagen: Ejemplo de lista ordenada](https://www.ionos.mx/digitalguide/fileadmin/_processed_/6/a/csm_listas-en-html-ejemplo-lista-ordenada_7e3f8d100c.webp "Ejemplo de lista ordenada")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/listas-en-html-ejemplo-lista-ordenada.png) Las entradas individuales de la lista ordenada están numeradas por defecto.  Consejo En otro artículo, profundizaremos en la funcionalidad y las posibilidades de las Ordered Lists.

### Listas desordenadas (Unordened Lists)

En una lista HTML desordenada no se utiliza un orden alfanumérico para los elementos de la lista, sino **símbolos de enumeración** como viñetas, guiones, flechas o marcas de verificación. De este modo, los contenidos pueden elaborarse de forma estructurada sin organizarlos jerárquicamente. Algunos contenidos típicos son, por ejemplo, los ingredientes de recetas de cocina, ciudades y países o listas de nombres. Para crear una lista desordenada se utiliza la etiqueta HTML de apertura `<ul>`, la etiqueta de cierre `</ul>` y varios puntos `<li>...</li>`.

La **sintaxis de las listas desordenadas** es la siguiente:

```html
<ul> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>Tercer elemento de la lista</li> 
<li>Cuarto elemento de la lista</li> 
<li>...</li> 
</ul>
```

El resultado es el siguiente:

[![Imagen: Ejemplo de lista desordenada](https://www.ionos.mx/digitalguide/fileadmin/_processed_/8/f/csm_listas-en-html-ejemplo-lista-desordenada_d8c82285b8.webp "Ejemplo de lista desordenada")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/listas-en-html-ejemplo-lista-desordenada.png) Si no introduces ninguna instrucción de código adicional, las listas desordenadas se muestran automáticamente con viñetas.  Consejo En un artículo diferente también encontrarás información adicional sobre las [Unordered Lists](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/lista-desordenada-html/).

### Listas de definición (Description Lists)

Con una lista de definición, puedes enumerar **términos seleccionados y sus respectivas definiciones**, explicaciones o descripciones de forma estructurada. Este tipo de lista HTML se utiliza sobre todo para glosarios, listas de productos o preguntas frecuentes. Para crear una lista de definición, utiliza los tres componentes siguientes:

- `<dl>...</dl>`: significa “Definition List” e indica el inicio y el final del elemento de la lista.
- `<dt>...</dt>`: significa “Definition Term” e identifica el término que debe explicarse.
- `<dd>...</dd>`: significa “Definition Description” e indica la descripción, definición o explicación del término asociado y sigue a la etiqueta `<dt>`.

Las listas de definición HTML se crean a partir de la siguiente **sintaxis**:

```html
<dl> 
<dt>Término 1</dt> 
<dd>Descripción o definición del término 1</dd> 
<dt>Término 2</dt> 
<dd>Descripción o definición del término 2</dd> 
<dt>Término 3</dt> 
<dd>Descripción o definición del término 3</dd> 
<dt>...</dt> 
<dd>...</dd> 
</dl>
```

El resultado es el siguiente:

[![Imagen: Ejemplo de lista de definción](https://www.ionos.mx/digitalguide/fileadmin/_processed_/3/d/csm_listas-en-html-ejemplo-lista-definicion_be6d9799a4.webp "Ejemplo de lista de definción")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/listas-en-html-ejemplo-lista-definicion.png) Ejemplo sencillo de lista de definición que enumera términos y proporciona la descripción o definición adecuada en la línea siguiente. ## Resumen de los ámbitos de aplicación de las listas en HTML

A continuación, encontrarás una visión general de las áreas de aplicación y los posibles usos de las distintas etiquetas para una lista HTML:

<table>
  <thead>
    <tr>
      <th>Lista ordenada</th>
      <th>Lista desordenada</th>
      <th>Lista de definición</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Instrucciones paso a paso</td>
      <td>Ventajas o desventajas</td>
      <td>Glosarios</td>
    </tr>
    <tr>
      <td>Tutoriales</td>
      <td>Menús desplegables o contextuales</td>
      <td>Preguntas frecuentes</td>
    </tr>
    <tr>
      <td>Listas de clasificación</td>
      <td>Listas de enlaces</td>
      <td>Listas de productos</td>
    </tr>
    <tr>
      <td>Comparación</td>
      <td>Fuentes y referencias</td>
      <td>Categorías</td>
    </tr>
  </tbody>
</table>

## Por qué usar listas en HTML

Con una lista HTML, te aseguras una mayor eficacia y estructura a la hora de comunicar el contenido y la información de la página. Las ventajas de las listas son las siguientes:

- Más estructura, claridad y organización de la información
- Más variedad y mejor evaluación por parte de los motores de búsqueda gracias a la variedad de elementos de la página
- Accesibilidad optimizada y estructuración semántica clara de las páginas para una mejor legibilidad
- Preparación visual personalizada del contenido de la página, incluso en combinación con estilos CSS

Consejo En nuestro [Tutorial HTML para principiantes](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) podrás encontrar toda la información importante para iniciarte sin problemas en el lenguaje de programación web.


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/listas-html-definicion-y-explicacion/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/listas-html-definicion-y-explicacion/) for AI/LLM consumption.