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. ¿Sabes como hacer una lista html? Hoy te enseñamos.
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 intentamos hacer lista en html 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.
//como crear listas en html
<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 hacer una lista 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!
