Cómo Crear LISTAS Ordenadas y Desordenadas en HTML

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.

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.