¿Cómo se crean listas desordenadas y ordenadas en HTML?

Listas Desordenadas

Las listas desordenadas se crean utilizando la etiqueta <ul> (unordered list) para la lista y <li> (list item) para cada elemento de la lista. La lista se presenta con viñetas por defecto.

Ejemplo de una lista desordenada:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

    

El código anterior generará la siguiente lista desordenada:

• Elemento 1
• Elemento 2
• Elemento 3

Listas Ordenadas

Las listas ordenadas se crean utilizando la etiqueta <ol> (ordered list) para la lista y <li> para cada elemento de la lista. Esta lista presenta los elementos numerados por defecto.

Ejemplo de una lista ordenada:

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

    

El código anterior generará la siguiente lista ordenada:

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Combinando Listas

También es posible anidar listas dentro de otras listas, combinando listas ordenadas y desordenadas.

Ejemplo de listas anidadas:

<ol>
    <li>Elemento 1</li>
    <li>Elemento 2
        <ul>
            <li>Subelemento 1</li>
            <li>Subelemento 2</li>
        </ul>
    </li>
    <li>Elemento 3</li>
</ol>

    

El código anterior generará la siguiente lista anidada:

1. Elemento 1
2. Elemento 2
   • Subelemento 1
   • Subelemento 2
3. Elemento 3

Conclusión

Crear listas en HTML es una tarea sencilla que permite organizar información de manera clara y estructurada. Las listas desordenadas son útiles para elementos sin un orden específico, mientras que las listas ordenadas son ideales cuando es importante el orden de los elementos.