Lección 3: Listas en HTML

Tipos de listas en HTML

HTML ofrece tres tipos principales de listas:

Listas no ordenadas (ul)
Listas ordenadas (ol)
Listas de definición (dl)

Listas no ordenadas

Las listas no ordenadas se utilizan cuando el orden de los elementos no es importante. Se crean con la etiqueta <ul> y cada elemento de la lista se define con la etiqueta <li>.

HTML

<ul>
    <li>Manzanas</li>
    <li>Bananas</li>
    <li>Naranjas</li>
</ul>

Resultado visible:

Manzanas
Bananas
Naranjas

Listas ordenadas

Las listas ordenadas se utilizan cuando el orden de los elementos es importante. Se crean con la etiqueta <ol> y cada elemento de la lista se define con la etiqueta <li>.

HTML

<ol>
    <li>Precalentar el horno</li>
    <li>Mezclar los ingredientes</li>
    <li>Hornear por 30 minutos</li>
</ol>

Resultado visible:

Precalentar el horno
Mezclar los ingredientes
Hornear por 30 minutos

Listas de definición

Las listas de definición se utilizan para mostrar términos y sus definiciones. Se crean con la etiqueta <dl>. Cada término se define con <dt> y cada definición con <dd>.

HTML

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de Marcado de Hipertexto</dd>
    <dt>CSS</dt>
    <dd>Hojas de Estilo en Cascada</dd>
</dl>

Resultado visible:

HTML: Lenguaje de Marcado de Hipertexto
CSS: Hojas de Estilo en Cascada

Listas anidadas

Las listas pueden anidarse dentro de otras listas para crear estructuras más complejas.

HTML

<ul>
    <li>Frutas
        <ul>
            <li>Manzanas</li>
            <li>Bananas</li>
        </ul>
    </li>
    <li>Verduras
        <ul>
            <li>Zanahorias</li>
            <li>Brócoli</li>
        </ul>
    </li>
</ul>

Resultado visible:

Frutas
- Manzanas
- Bananas
Verduras
- Zanahorias
- Brócoli

Ejercicio práctico

Crea una estructura de lista que incluya:

Una lista ordenada con al menos 3 elementos
Una lista no ordenada con al menos 3 elementos
Una lista de definición con al menos 2 términos y sus definiciones
Al menos una lista anidada dentro de otra lista