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 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, 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.
- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad
¿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 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:
<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:
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:
<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:
En un artículo diferente también encontrarás información adicional sobre las Unordered Lists.
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:
<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:
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:
| Lista ordenada | Lista desordenada | Lista de definici贸n |
|---|---|---|
| Instrucciones paso a paso | Ventajas o desventajas | Glosarios |
| Tutoriales | Men煤s desplegables o contextuales | Preguntas frecuentes |
| Listas de clasificaci贸n | Listas de enlaces | Listas de productos |
| Comparaci贸n | Fuentes y referencias | Categor铆as |
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
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
En nuestro Tutorial HTML para principiantes podrás encontrar toda la información importante para iniciarte sin problemas en el lenguaje de programación web.