Listas en HTML

¿Qué son las listas en HTML?

Las listas en HTML son estructuras que permiten agrupar elementos relacionados bajo un mismo contenedor. Existen principalmente tres tipos de listas: listas no ordenadas, listas ordenadas y listas de definición.

Listas no ordenadas

Una lista no ordenada se crea utilizando la etiqueta <ul>. Los elementos de la lista se definen con la etiqueta <li>. Este tipo de lista muestra los elementos con viñetas por defecto:

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

Listas ordenadas

Una lista ordenada se crea utilizando la etiqueta <ol>. Los elementos de la lista también se definen con <li>, pero se numeran automáticamente:

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

Listas de definición

Una lista de definición se utiliza para asociar términos con sus definiciones y se crea utilizando las etiquetas <dl> (lista de definición), <dt> (término de definición), y <dd> (descripción de definición):

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado utilizado para crear páginas web.</dd>
    
    <dt>CSS</dt>
    <dd>Lenguaje utilizado para estilizar documentos HTML.</dd>
</dl>

Listas anidadas

Las listas pueden anidarse dentro de otras listas, permitiendo crear estructuras más complejas. Aquí hay un ejemplo de una lista no ordenada dentro de una lista ordenada:

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento
        <ul>
            <li>Subelemento 1</li>
            <li>Subelemento 2</li>
        </ul>
    </li>
    <li>Tercer elemento</li>
</ol>