¿Cómo crear una lista desordenada en HTML?

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:

compact : Reducirá la lista.
type : Especifica qué tipo de marcador se usa en la lista.

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:

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:

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:

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:

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:

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:

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:

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

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta