Cómo Crear LISTAS Ordenadas y Desordenadas en HTML

Listas HTML

Tenemos dos tipos de listas en HTML:

  • No ordenadas
  • Ordenadas

See the Pen HTML | 1.12 - Listas - ordenadas y no ordenadas by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Listas no ordenadas

Una lista no ordenada en HTML se hace usando la etiqueta <ul>. Y cada elemento dentro de ella son etiquetas <li>.

Listas no ordenadas - marcador

Con la propiedad de CSS list-style-type podemos cambiar el marcador de cada elemento de la lista

  • disc: es un círculo relleno
  • circle: es una circunferencia
  • square: es un cuadrado
  • none: no sale marcador

See the Pen HTML | 1.12 - Listas - no ordenadas marcador by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Listas ordenadas

Una lista ordenada en HTML se hace usando la etiqueta <ol> y los elementos de dentro de ella usan la etiqueta <li>

Listas ordenadas - atributo type

El atributo type se usa para definir el marcador.

  • type=”1”: Con números (es la opción por defecto)
  • type=”A”: Con letras mayúsculas
  • type=”a”: Con letras minúsculas
  • type=”I”: Con números romanos en mayúsculas
  • type=”i”: Con números romanos en minúsculas

See the Pen HTML | 1.12 - Listas - ordenadas marcador by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Listas de descripción

HTML también admite listas de descripción.

Una lista de descripción es una lista de términos, con una descripción de cada término.

La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd> describe cada término:

See the Pen HTML | 1.12 - Listas - listas de descripción by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Listas anidadas

Las listas pueden anidarse (meter listas dentro de listas).

See the Pen HTML | 1.12 - Listas - listas anidadas by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Control del conteo en la lista

Por defecto una lista ordenada empieza por el número 1, pero esto se puede cambiar usando el atributo start.

Lista horizontal con CSS

Con CSS se le pueden dar muchos estilos a las listas, pero uno muy común es hacer una lista en horizontal (por ejemplo para un menú)

See the Pen HTML | 1.12 - Listas - lista horizontal con CSS by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.