Cómo Crear LISTAS Ordenadas y Desordenadas en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats