A menudo, la información se debe representar como una lista de ítems. Por ejemplo, muchos sitios web incluyen listados de libros, películas, o términos y descripciones. Para crear estos listados, HTML ofrece los siguientes elementos.
<ul>—Este elemento crea una lista de ítems sin orden. Está compuesto por etiquetas de apertura y cierre para agrupar los ítems (<ul> y </ul>) y trabaja junto con el elemento <li> para definir cada uno de los ítems de la lista.
<ol>—Este elemento crea una lista ordenada de ítems. Está compuesto por etiquetas de apertura y cierre para agrupar los ítems (<ol> y </ol>) y trabaja junto con el elemento <li> para definir los ítems de la lista. Este elemento puede incluir los atributos reversed para invertir el orden de los indicadores, start para determinar el valor desde el cual los indicadores tienen que comenzar a contar y type para determinar el tipo de indicador que queremos usar. Los valores disponibles para el atributo type son 1 (números), a (letras minúsculas), A (letras mayúsculas), i (números romanos en minúsculas) e I (números romanos en mayúsculas).
<dl>—Este elemento crea una lista de términos y descripciones. El elemento trabaja junto con los elementos <dt> y <dd> para definir los ítems de la lista. El elemento <dl> define la lista, el elemento <dt> define los términos y el elemento <dd> define las descripciones.
El elemento que usamos para crear la lista depende de las características del contenido. Por ejemplo, si el orden de los ítems no es importante, podemos usar el elemento <ul>. En esta clase de listas, los ítems se declaran entre las etiquetas <ul> con el elemento <li>, como muestra el siguiente ejemplo.
El elemento <ul> presenta los ítems en el orden en el que se han declarado en el código y los identifica con un punto del lado izquierdo.
Si necesitamos declarar la posición de cada ítem, podemos crear la lista con el elemento <ol>. Este elemento crea una lista de ítems en el orden en el que se han declarado en el código, pero en lugar de usar puntos para identificarlos, les asigna un valor. Por defecto, los indicadores se crean con números, pero podemos cambiarlos con el atributo type. En el siguiente ejemplo, usamos letras mayúsculas.
Aunque los ítems se muestran siempre en el orden en el que se han declarado en el código, podemos utilizar otros atributos del elemento <ol> para cambiar el orden de los indicadores. Por ejemplo, agregando el atributo reversed logramos que los indicadores se muestren en orden invertido.
Los elementos <dl>, <dt>, y <dd> trabajan de forma similar al elemento <ul>, pero su propósito es mostrar una lista de términos y descripciones. Los términos se representan por el elemento <dt> y las descripciones por el elemento <dd>. En el siguiente ejemplo, los usamos para agregar la descripción de los libros listados anteriormente.
Los siguientes elementos se han diseñado con propósitos diferentes, pero también se utilizan frecuentemente para construir listas de ítems.
<blockquote>—Este elemento representa un bloque de texto que incluye una cita tomada de otro texto en el documento.
<details>—Este elemento crea una herramienta que se expande cuando se hace clic en ella para mostrar información adicional. La parte visible se define con el elemento <summary>, y se pueden usar elementos comunes como <p> para definir el contenido.
El elemento <blockquote> es similar al elemento <p>, pero como también incluye márgenes a los costados, se ha usado tradicionalmente para presentar listas de valores, como lo demuestra el siguiente ejemplo.
El listado generado por el elemento <blockquote> se muestra igual que otras listas, pero no incluye puntos o números para identificar cada ítem.
En sitios web modernos son comunes las herramientas que revelan información adicional cuando el usuario lo requiere. Para ofrecer esta posibilidad, HTML incluye el elemento <details>. Este elemento muestra un título, especificado por el elemento <summary>, y contenido que se puede representar por elementos comunes como <p> o <blockquote>. Debido a esto, el elemento <details> se puede utilizar para revelar una lista de valores, como lo hacemos en el siguiente ejemplo.
