Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles

Tipos de listas en Html

Tipos de listas en Html

En este tutorial aprenderemos a utilizar los diferentes tipos de listas que existen en HTML: ordenadas, no ordenadas y de definiciones.

Listas ordenadas

Las listas ordenadas se crean con la etiqueta <ol> (ordered list) y cada uno de sus elementos con <li> (list item). Se creará automáticamente un número por cada elemento de la lista. Ejemplo de lista ordenada
<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ol>
Ejemplo de lista ordenada en Html
Lista ordenada

Listas no ordenadas

Las listas no ordenadas se crean con la etiqueta <ul> (unordered list) y cada elemento con <li> (list item). En lugar de un número, por cada elemento de la lista se creará un punto. Ejemplo de lista no ordenada:
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ul>
Ejemplo de lista no ordenada en Html
Lista no ordenada
Podemos definir en cada <li> qué tipo de símbolo queremos que preceda al contenido: disc, circle, square o none. Si no ponemos ninguno se usará el que viene por defecto. Ejemplo
<ul>
  <li type="disc">Elemento 1</li>
  <li type="circle">Elemento 2</li>
  <li type="square">Elemento 3</li>
  <li type="none">Elemento 4</li>
</ul>
Ejemplo de iconos de filas en listas Html
Iconos de filas
Si ponemos el tipo en la etiqueta <ul> todos los elementos tendrán ese valor. Ejemplo
<ul type="circle">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ul>
Ejemplo de icono en lista Html
Icono en lista

Listas de definición

Las listas de definición se utilizan, como su nombre indica, para hacer definiciones de términos. Se crean con la etiqueta <dl> (definition list) y cada uno de los términos con <dt> (definition term). Dentro de cada término irá su descripción con la etiqueta <dd> (definition description). Ejemplo de lista de definición
<dl>
  <dt>Término 1</dt>
  <dd>Definición del término 1</dd>
</dl>
<dl>
  <dt>Término 2</dt>
  <dd>Definición del término 2</dd>
</dl>
Ejemplo de lista de definición en Html
Lista de definición
Más tutoriales de HTML y CSS

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »