# UL HTML: lista desordenada en HTML
Una lista desordenada HTML te permite enumerar el contenido de tus páginas web de forma clara y sin numeración. Además de la etiqueta básica `
` en HTML, otros elementos relevantes son la etiqueta de lista `
` y el atributo `type`.
## ¿Qué son las listas desordenadas HTML y para qué se utilizan?
Las listas desordenadas en HTML son elementos HTML que se utilizan para la **creación de listas** en las que el orden de los elementos individuales de la lista es irrelevante. Estas listas pueden integrarse utilizando la [etiqueta HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) `
`, en la que `
` marca el punto de inicio y `
` el final de la lista. Los distintos elementos de una lista desordenada se marcan con la etiqueta de listas en HTML `
`, que no limita el número de elementos.
Las listas HTML-`
` son adecuadas para la presentación estructurada de una amplia variedad de contenidos, como los siguientes:
- **Listas de tareas clásicas**: listas de verificación, de ingredientes o de tareas pendientes
- **Funciones**: enumeración de las características de un producto o de sus prestaciones
- **Enlaces**: listado de enlaces a sitios externos o perfiles en redes sociales
- **Etiquetas**: lista de palabras clave populares
- **Listas de precios**: presentación en forma de lista de los precios de los servicios o productos
- **Citas**: presentación estructurada de las próximas citas
Consejo La contrapartida de las listas desordenadas HTML son las listas ordenadas HTML que se caracterizan por el hecho de que los **elementos individuales de la lista están enumerados** y, por tanto, están sujetos a una jerarquía clara.
## ¿Cómo se crea una lista desordenada HTML con `
`?
Si deseas incluir una lista desordenada en HTML, puedes hacerlo en cualquier parte del área `` de tus páginas web. Como ya se ha mencionado, una etiqueta introductoria (`
`) y una de cierre (`
`) sirven como marcadores para el inicio y el final de la lista, mientras que los elementos individuales de la lista se definen con la etiqueta introductoria `
` y la de cierre `
`. Por tanto, la sintaxis básica de la etiqueta `
` en HTML es la siguiente:
```html
Elemento de la lista 1
Elemento de la lista 2
Elemento de la lista 3
…
hash_2273465e03ddbb642915192fffda4675d4b5a414
```
Como en este caso no se ha especificado el símbolo de lista, HTML utiliza el símbolo estándar de “Bullet”, es decir, el clásico punto centrado.
## Listas desordenadas en HTML anidadas
Aunque lo normal es utilizar listas ordenadas en HTML para implementar listas jerárquicas, también es posible subordinar elementos de una lista utilizando la etiqueta <ul> en HTML. Para crear este tipo de listas anidadas, simplemente incluye más listas desordenadas HTML dentro de la etiqueta `
`existente, como en el siguiente ejemplo donde encontramos dos listas subordinadas:
```html
Lista desordenada anidada:
Frutas
Manzanas
Granny Smith
Gala
Fuji
Naranjas
Navel
Naranja sanguina
Mandarina
hash_2273465e03ddbb642915192fffda4675d4b5a414
```
La categoría principal “Frutas” se subdivide así en las subcategorías “Manzanas” y “Naranjas”, en las que se enumeran distintas variedades. Para el usuario en el navegador, el ejemplo anterior tendría un aspecto similar al siguiente:
[](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/ul-html-anidada-ejemplo.png) En el ejemplo se utilizan tres elementos `` diferentes.
## Personalizar los símbolos de lista `
` con `list-style-type`: ejemplos
Mediante la propiedad CSS `list-style-type`, que puede aplicarse a través del [atributo HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/atributos-html/ "/") `style` o una hoja de estilo externa, se pueden personalizar los símbolos de las listas desordenadas en HTML en cualquier momento. De esta forma, se pueden definir, por ejemplo, los siguientes símbolos:
Símbolo `list-style-type`
Descripción
`disc`
Círculo con relleno; selección estándar HTML sin atributo`style`
`circle`
Círculo sin relleno
`square`
Cuadrado
`none`
Sin símbolo de lista
En código, esta personalización del diseño tiene, en el caso de que se desee utilizar círculos sin relleno, el siguiente aspecto:
```html
Manzanas:
Granny Smith
Gala
Fuji
` del área ``. Esto garantiza una distinción clara entre contenido y estilo y facilita el mantenimiento del código.
This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/lista-desordenada-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/lista-desordenada-html/) for AI/LLM consumption.