Lista en HTML: enu­me­ra­cio­nes con etiquetas li-, ol- y ul-

Las listas en HTML presentan in­fo­r­ma­ción y elementos se­le­c­cio­na­dos en un documento HTML en forma de lista. En función de los re­qui­si­tos, puede tratarse de una lista ordenada, des­or­de­na­da o de de­fi­ni­ció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 in­fo­r­ma­ción y elementos de texto en forma de lista es­tru­c­tu­ra­da y clara. De­pe­n­die­n­do de los re­qui­si­tos, el contenido puede or­ga­ni­zar­se como una lista ordenada con nu­me­ra­ción o como una lista des­or­de­na­da. Desde HTML5, existe también una tercera variante, las listas de de­fi­ni­ción, es­pe­cia­l­me­n­te adecuadas para cla­si­fi­car términos y sus re­s­pe­c­ti­vas de­fi­ni­cio­nes.

Las listas en HTML son ese­n­cia­les para el diseño variado y claro de las páginas web, con el fin de ga­ra­n­ti­zar una co­mu­ni­ca­ción precisa, rápida y clara de la in­fo­r­ma­ción o el contenido. Esto se aplica a una simple enu­me­ra­ción, a una enu­me­ra­ción as­ce­n­de­n­te de in­fo­r­ma­ción o a de­fi­ni­cio­nes pre­se­n­ta­das de forma clara y detallada.

¿Qué tipos de listas en HTML existen?

Como ya se ha me­n­cio­na­do, las listas pueden mostrarse en do­cu­me­n­tos HTML de varias formas. Mientras que las listas ordenadas y des­or­de­na­das se utilizan con mucha fre­cue­n­cia y prá­c­ti­ca­me­n­te no deberían faltar en ninguna página web, las listas de de­fi­ni­ción, también conocidas como De­s­cri­p­tion Lists, se utilizan con mucha menos fre­cue­n­cia. En las si­guie­n­tes 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 ca­ra­c­te­ri­za por un contenido y unos elementos enu­me­ra­dos que se organizan y es­tru­c­tu­ran en una jerarquía deseada uti­li­za­n­do una secuencia al­fa­nu­mé­ri­ca as­ce­n­de­n­te. Esto permite una secuencia clara y bien pensada de la in­fo­r­ma­ció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 cla­si­fi­ca­das, in­s­tru­c­cio­nes 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:

Close

Listas des­or­de­na­das (Unordened Lists)

En una lista HTML des­or­de­na­da no se utiliza un orden al­fa­nu­mé­ri­co para los elementos de la lista, sino símbolos de enu­me­ra­ción como viñetas, guiones, flechas o marcas de ve­ri­fi­ca­ción. De este modo, los co­n­te­ni­dos pueden ela­bo­rar­se de forma es­tru­c­tu­ra­da sin or­ga­ni­zar­los je­rá­r­qui­ca­me­n­te. Algunos co­n­te­ni­dos típicos son, por ejemplo, los in­gre­die­n­tes de recetas de cocina, ciudades y países o listas de nombres. Para crear una lista des­or­de­na­da se utiliza la etiqueta HTML de apertura <ul>, la etiqueta de cierre </ul> y varios puntos <li>...</li>.

La sintaxis de las listas des­or­de­na­das 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:

Close

Listas de de­fi­ni­ción (De­s­cri­p­tion Lists)

Con una lista de de­fi­ni­ción, puedes enumerar términos se­le­c­cio­na­dos y sus re­s­pe­c­ti­vas de­fi­ni­cio­nes, ex­pli­ca­cio­nes o de­s­cri­p­cio­nes de forma es­tru­c­tu­ra­da. Este tipo de lista HTML se utiliza sobre todo para glosarios, listas de productos o preguntas fre­cue­n­tes. Para crear una lista de de­fi­ni­ción, utiliza los tres co­m­po­ne­n­tes si­guie­n­tes:

• <dl>...</dl>: significa “De­fi­ni­tion List” e indica el inicio y el final del elemento de la lista.
• <dt>...</dt>: significa “De­fi­ni­tion Term” e ide­n­ti­fi­ca el término que debe ex­pli­car­se.
• <dd>...</dd>: significa “De­fi­ni­tion De­s­cri­p­tion” e indica la de­s­cri­p­ción, de­fi­ni­ción o ex­pli­ca­ción del término asociado y sigue a la etiqueta <dt>.

Las listas de de­fi­ni­ció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:

Close

Resumen de los ámbitos de apli­ca­ción de las listas en HTML

A co­n­ti­nua­ción, en­co­n­tra­rás una visión general de las áreas de apli­ca­ción y los posibles usos de las distintas etiquetas para una lista HTML:

Por qué usar listas en HTML

Con una lista HTML, te aseguras una mayor eficacia y es­tru­c­tu­ra a la hora de comunicar el contenido y la in­fo­r­ma­ción de la página. Las ventajas de las listas son las si­guie­n­tes:

• Más es­tru­c­tu­ra, claridad y or­ga­ni­za­ción de la in­fo­r­ma­ción
• Más variedad y mejor eva­lua­ción por parte de los motores de búsqueda gracias a la variedad de elementos de la página
• Ac­ce­si­bi­li­dad op­ti­mi­za­da y es­tru­c­tu­ra­ción semántica clara de las páginas para una mejor le­gi­bi­li­dad
• Pre­pa­ra­ción visual pe­r­so­na­li­za­da del contenido de la página, incluso en co­m­bi­na­ción con estilos CSS