Cómo crear listas en HTML

Autor: | Última modificación: 9 de mayo de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Una de las formas más comunes de presentar contenido en una página web son las listas. Por tanto, hemos preparado este post para enseñarte cómo crear listas en HTML, así como los tipos de listas que existen.

Tipos de listas en HTML

Las listas son elementos que posibilitan una mejor navegación en las páginas web, ya que permiten agrupar cierto contenido según se requiera. Para los archivos HTML, las listas se clasifican en ordenadas, desordenadas y descriptivas. Cada una de estas posee su propia etiqueta y dispone de los atributos que le sean convenientes.

Cómo crear listas en HTML desordenadas

Las listas desordenadas son aquellas en las que la información enlistada no necesita una secuencia o jerarquía. Por ejemplo, cuando mencionamos las ciudades de España, pero no estamos haciendo un ranking ni debemos mencionarlas en orden alfabético ni ninguna exigencia secuencial.

La etiqueta de las listas desordenadas es <ul> </ul> seguida de la etiqueta <li> </li>. Recuerda que la etiqueta <li> agrupa la información de cada punto o ítem de la lista, sea ordenada o desordenada. Es precisamente a la etiqueta <li> a la que debemos aclarar el símbolo elegido; si no lo aclaramos, el símbolo se generará de forma automática.

<ul>
  <li>Joaquín</li>
  <li>Carmen</li>
  <li>Teresa</li>
  <li>Fermín</li>
</ul>

Cómo crear listas en HTML ordenadas

En cuanto a las listas ordenadas, las usamos cuando cada punto tiene un lugar fijo y su ubicación obedece a unas razones, como cuando realizamos una lista con el top 5 de restaurantes o los resultados de una votación. En este caso, la etiqueta HTML que corresponde a las listas ordenadas es <ol> </ol>.

Es decir, abres con la etiqueta <ol> y luego estableces cada punto con la etiqueta <li>. En las listas ordenadas, la etiqueta <li> asume por defecto un número, pero con CSS es posible modificar este estilo, así como establecer desde qué número empezar.

<ol>
  <li>Enero</li>
  <li>Febrero</li>
  <li>Marzo</li>
  <li>Abril</li>
    
</ol>

Cómo crear listas en HTML descriptivas

Las listas descriptivas corresponden a las listas en las que se establecen definiciones, como, por ejemplo, los glosarios. Si bien este contenido podría ubicarse como lista ordenada o desordenada, las listas descriptivas tienen su propio código y sus etiquetas establecidas son <dl>, <dt>, <dd>.

  • <dl> </dl>: es la etiqueta de apertura y cierre que indica que dentro viene una lista descriptiva.
  • <dt> </dt>: señala el término a definir.
  • <dd> </dd>: establece el inicio y fin de la definición.
<dl>
  <dt>Listas ordenadas</dt>
  <dd>Aquí va la definición</dd>
  <dt>Listas desordenadas</dt>
  <dd>Aquí va la definición</dd>
  <dt>Listas descriptivas</dt>
  <dd>Aquí va la definición</dd>
</dl>

¿Quieres continuar?

En este artículo abordamos aspectos básicos sobre cómo crear listas en HTML, pero no olvides que hay mucho más por explorar. Por esta razón, te invitamos a seguir aprendiendo gracias a nuestros bootcamps disponibles. ¡Apúntate!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]