En este artículo, sabremos cómo crear una lista desordenada en HTML. Se utiliza una etiqueta <ul> de lista desordenada en HTML para definir el elemento de lista desordenada en un documento HTML. Contiene el elemento de elementos de lista <li>. La etiqueta <ul> requiere etiquetas de apertura y cierre.
Sintaxis:
<ul> List of items </ul>
Atributo: esta etiqueta contiene dos atributos que se enumeran a continuación:
Nota: los atributos <ul> no son compatibles con HTML 5.
Ejemplo: Este ejemplo ilustra el uso de una lista desordenada usando la etiqueta <ul>.
HTML
<!DOCTYPE html> <html> <head> <title>Unordered list</title> </head> <body> <h2>Welcome To GeeksforGeeks Learning</h2> <h5>List of available courses</h5> <ul> <li>Data Structures & Algorithm</li> <li>Web Technology</li> <li>Aptitude & Logical Reasoning</li> <li>Programming Languages</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909194218/13.jpg)
Lista desordenada de HTML
Hay varios atributos de tipo lista que se pueden usar con elementos de lista no ordenados.
Atributo de tipo HTML <li>: El atributo de tipo <li> en HTML se utiliza para especificar el tipo de elementos de una lista. Este atributo también define el estilo de la viñeta de los elementos de la lista.
<li type="disc|circle|square">
Valores de atributos:
- disco: Es el valor por defecto. Crea un círculo relleno.
- círculo: Crea un círculo vacío.
- cuadrado: Crea un cuadrado relleno.
Nota: HTML 5 no admite el atributo de tipo <li>.
Ejemplo: Este ejemplo describe la lista desordenada de HTML.
HTML
<!DOCTYPE html> <html> <head> <title>How to define an unordered list</title> </head> <body> <h1>GeeksforGeeks</h1> <h2>HTML5: How to define an unordered list?</h2> <p>GeeksforGeeks courses List:</p> <ul> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20200521120615/mmm1.jpg)
Lista desordenada de HTML
La lista desordenada de HTML tiene varios marcadores de elementos de lista:
Disco: se utiliza para establecer el marcador de elementos de la lista en una viñeta, es decir, predeterminado.
Ejemplo 1: este ejemplo ilustra el uso de una lista desordenada con una viñeta de disco configurando la propiedad list-style-type en disc.
HTML
<!DOCTYPE html> <html> <head> <title>HTML ul tag</title> </head> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Disc Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type:disc;"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909200420/5.jpg)
Lista desordenada con marcador de elemento de lista de discos
Círculo: se utiliza para establecer el marcador de elementos de la lista en un círculo.
Ejemplo 2: En este ejemplo, hemos usado una lista desordenada con una viñeta circular al establecer la propiedad de tipo de estilo de lista en círculo.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Circle Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: circle"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909170122/6.jpg)
Lista desordenada con marcador de elemento de lista circular
Cuadrado: se utiliza para establecer el marcador de elementos de la lista en un cuadrado.
Ejemplo 3: En este ejemplo, hemos usado una lista desordenada con una viñeta cuadrada al establecer la propiedad de tipo de estilo de lista en cuadrado.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Square Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: square"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909170706/7.jpg)
Lista desordenada con marcador de elemento de lista cuadrada
ninguno: se utiliza para establecer el marcador de elementos de la lista sin marca.
Ejemplo 4: Este ejemplo ilustra el uso de una lista desordenada sin viñeta estableciendo la propiedad de tipo de estilo de lista en ninguno.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with No Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: none"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909171726/8.jpg)
Lista desordenada sin marcador de elemento de lista
Lista desordenada anidada: se utiliza para anidar los elementos de la lista, es decir, una lista dentro de otra lista.
Ejemplo: Este ejemplo describe el uso de la lista desordenada en un formato anidado.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Nested Unordered List</h2> <p>GeeksforGeeks courses List:</p> <ul> <li>DSA</li> <ul> <li>Array</li> <li>Linked List</li> <li>stack</li> <li>Queue</li> </ul> <li>Web Technologies</li> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <li>Aptitude</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210909173056/9.jpg)
Lista desordenada anidada
Navegadores compatibles:
- Google Chrome 94.0 y superior
- Firefox 92.0 y superior
- Microsoft Edge 93.0
- IE 11.0
- Safari 14.1
- Ópera 78.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA