Listas en HTML

Listas en HTML

Las listas en HTML son objetos que muestran una serie de elementos de manera consecutiva.

Existen tres tipos de listas:

  • Listas no ordenadas
  • Listas ordenadas
  • Listas de Definición.

Listas no ordenadas

Representan una colección de elementos en donde estos no requieren de un orden específico.

Lista no ordenada (Unordered list)
<ul></ul>

Elemento en bloque Elemento en bloque

Cada elemento de lista se debe declarar con la instrucción li:

Elemento de lista (List item)
<li></li>

Elemento en bloque Elemento en bloque

El Navegador, por omisión, a cada elemento le antepone un punto o viñeta.

See the Pen ul by Miguel Méndez (@codigo-web) on CodePen.0

Listas Ordenadas

La lista ordenada es muy similar a la lista no ordenada, excepto que enumera cada uno de los elementos (<li></li>) que en esta se encuentren.

Lista ordenada (Ordered list)
<ol></ol>

Elemento en bloque Elemento en bloque

Igual que en la Lista no ordenada, cada elemento de lista se debe declarar con la instrucción li:

Elemento de lista (List item)
<li></li>

Elemento en bloque Elemento en bloque

El Navegador, por omisión, antepone el número arábigo 1 al primer elemento de la lista, sumando uno a cada uno de los elementos restantes.

See the Pen ol by Miguel Méndez (@codigo-web) on CodePen.0

En las Listas ordenadas, mediante el atributo type, es posible determinar que es lo que antecede a cada elemento, los valores posibles son:

• ‘a’ indica letras minúsculas
• ‘A’ indica letras mayúsculas
• ‘i’ indica números romanos en minúsculas
• ‘I’ indica números romanos en mayúsculas
• ‘1’ indica números arábigos (Por omisión)

See the Pen olMayuscula by Miguel Méndez (@codigo-web) on CodePen.0

Tanto en las Listas ordenadas y no ordenadas, es posible anidar varias listas, de modo que un elemento de la lista pueda tener subelementos:

See the Pen ulSubelementos by Miguel Méndez (@codigo-web) on CodePen.0

Lista de definición

Este tipo de lista es útil para generar términos y definiciones (por ejemplo, un Glosario).

En la lista de definición los elementos que componen la lista no se representan como un elemento de lista, sino que son dos elementos, funcionan en pares. El primer elemento corresponde al Término y el segundo corresponde a la Definición de ese Término.

Lista de definición (Definition list)
<dl></dl>

Elemento en bloque Elemento en bloque

Su uso requiere otras dos instrucciones: dl y dt.

Término a definir (Definition term)
<dt></dt>

Elemento en bloque Elemento en bloque

Indica el término a definir. Generalmente le sigue la Descripción de la definición (<dd></dd>), aunque es posible tener varios términos y una sola descripción para todos.

Descripción de la definición (Definition description)
<dd></dd>

Elemento en bloque Elemento en bloque

Indica la definición del o de los términos (<dt></dt>). Es posible poner varias veces la descripción, si es que uno o varios términos tienen más de una definición.

See the Pen dl by Miguel Méndez (@codigo-web) on CodePen.0

En el ejemplo, el primer conjunto cuenta con un solo término y una definición, el segundo conjunto cuenta con un par de términos que comparten una definición y en el tercer conjunto, un solo término tiene dos definiciones.

¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz