Una lista des­or­de­na­da HTML te permite enumerar el contenido de tus páginas web de forma clara y sin nu­me­ra­ción. Además de la etiqueta básica <ul> en HTML, otros elementos re­le­va­n­tes son la etiqueta de lista <li> y el atributo type.

¿Qué son las listas des­or­de­na­das HTML y para qué se utilizan?

Las listas des­or­de­na­das en HTML son elementos HTML que se utilizan para la creación de listas en las que el orden de los elementos in­di­vi­dua­les de la lista es irre­le­va­n­te. Estas listas pueden in­te­grar­se uti­li­za­n­do la etiqueta HTML <ul>, en la que <ul> marca el punto de inicio y </ul> el final de la lista. Los distintos elementos de una lista des­or­de­na­da se marcan con la etiqueta de listas en HTML <li>, que no limita el número de elementos.

Las listas HTML-<ul> son adecuadas para la pre­se­n­ta­ción es­tru­c­tu­ra­da de una amplia variedad de co­n­te­ni­dos, como los si­guie­n­tes:

  • Listas de tareas clásicas: listas de ve­ri­fi­ca­ción, de in­gre­die­n­tes o de tareas pe­n­die­n­tes
  • Funciones: enu­me­ra­ción de las ca­ra­c­te­rí­s­ti­cas de un producto o de sus pre­s­ta­cio­nes
  • Enlaces: listado de enlaces a sitios externos o perfiles en redes sociales
  • Etiquetas: lista de palabras clave populares
  • Listas de precios: pre­se­n­ta­ción en forma de lista de los precios de los servicios o productos
  • Citas: pre­se­n­ta­ción es­tru­c­tu­ra­da de las próximas citas
Consejo

La co­n­tra­pa­r­ti­da de las listas des­or­de­na­das HTML son las listas ordenadas HTML que se ca­ra­c­te­ri­zan por el hecho de que los elementos in­di­vi­dua­les de la lista están enu­me­ra­dos y, por tanto, están sujetos a una jerarquía clara.

¿Cómo se crea una lista des­or­de­na­da HTML con <ul>?

Si deseas incluir una lista des­or­de­na­da en HTML, puedes hacerlo en cualquier parte del área <body> de tus páginas web. Como ya se ha me­n­cio­na­do, una etiqueta in­tro­du­c­to­ria (<ul>) y una de cierre (</ul>) sirven como ma­r­ca­do­res para el inicio y el final de la lista, mientras que los elementos in­di­vi­dua­les de la lista se definen con la etiqueta in­tro­du­c­to­ria <li> y la de cierre </li>. Por tanto, la sintaxis básica de la etiqueta <ul> en HTML es la siguiente:

<body>
<ul>
<li>Elemento de la lista 1</li>
<li>Elemento de la lista 2</li>
<li>Elemento de la lista 3</li>
<li>…</li>
</ul>
</body>
html

Como en este caso no se ha es­pe­ci­fi­ca­do el símbolo de lista, HTML utiliza el símbolo estándar de “Bullet”, es decir, el clásico punto centrado.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta di­s­po­ni­bi­li­dad >99.99 %
  • Solo en IONOS: hasta 500 GB incluidos

Listas des­or­de­na­das en HTML anidadas

Aunque lo normal es utilizar listas ordenadas en HTML para im­ple­me­n­tar listas je­rá­r­qui­cas, también es posible su­bo­r­di­nar elementos de una lista uti­li­za­n­do la etiqueta <ul> en HTML. Para crear este tipo de listas anidadas, si­m­ple­me­n­te incluye más listas des­or­de­na­das HTML dentro de la etiqueta <ul>existente, como en el siguiente ejemplo donde en­co­n­tra­mos dos listas su­bo­r­di­na­das:

<body>
<p><strong>Lista desordenada anidada:</strong></p>
<ul>
    <li>Frutas
        <ul>
            <li>Manzanas
                <ul>
                    <li>Granny Smith</li>
                    <li>Gala</li>
                    <li>Fuji</li>
                </ul>
            </li>
            <li>Naranjas
                <ul>
                    <li>Navel</li>
                    <li>Naranja sanguina</li>
                    <li>Mandarina</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
html

La categoría principal “Frutas” se subdivide así en las su­b­ca­te­go­rías “Manzanas” y “Naranjas”, en las que se enumeran distintas va­rie­da­des. Para el usuario en el navegador, el ejemplo anterior tendría un aspecto similar al siguiente:

Imagen: Ejemplo de lista desordenada HTML anidada
En el ejemplo se utilizan tres elementos `
    ` di­fe­re­n­tes.

Pe­r­so­na­li­zar los símbolos de lista <ul> con list-style-type: ejemplos

Mediante la propiedad CSS list-style-type, que puede aplicarse a través del atributo HTML style o una hoja de estilo externa, se pueden pe­r­so­na­li­zar los símbolos de las listas des­or­de­na­das en HTML en cualquier momento. De esta forma, se pueden definir, por ejemplo, los si­guie­n­tes símbolos:

S铆mbolo list-style-type De颅s颅cri颅p颅ci贸n
disc C铆rculo con relleno; selecci贸n est谩ndar HTML sin atributostyle
circle C铆rculo sin relleno
square Cuadrado
none Sin s铆mbolo de lista

En código, esta pe­r­so­na­li­za­ción del diseño tiene, en el caso de que se desee utilizar círculos sin relleno, el siguiente aspecto:

<body>
<p><strong>Manzanas:</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
</body
html
Nota

Para un diseño más completo y re­uti­li­za­ble, es aco­n­se­ja­ble definir el CSS por separado en un archivo o en la etiqueta <style> del área <head>. Esto garantiza una di­s­ti­n­ción clara entre contenido y estilo y facilita el ma­n­te­ni­mie­n­to del código.

Ir al menú principal