tutorial de HTML

Las listas nos permiten agregar información de manera más clara. Hay tres tipos diferentes: las listas no-ordenadas (no numeradas), las listas ordenadas (numeradas) y las listas de definiciones.

Las listas no-ordenadas (unordered lists) sirven para mostrar cosas que no necesitan ir precedidas por un número. La etiqueta a utilizar es <UL> </UL> y, cada item en la lista se agrega con la etiqueta <LI> </LI>:

<UL>
    <LI> Un item </LI>
    <LI> Otro item </LI>
    <LI> Cualquier item </LI>
    <LI> Ultimo item </LI>
</UL>

Las listas ordenadas (ordered lists) sirven para mostrar datos en un orden determinado. Los items se agregan igual que en el caso anterior, la diferencia es que utilizamos la etiqueta <OL> </OL> para enmarcar todo. El resultado será el mismo pero cada item estará precedido por un número correlativo:

<OL>
    <LI> Un item </LI>
    <LI> Otro item </LI>
    <LI> Cualquier item </LI>
    <LI> Ultimo item </LI>
</OL>

Las listas de definición se utilizan para glosarios. Toda la lista debe ir entre las etiquetas <DL> </DL> (definition list). A diferencia de las anteriores, cada renglónn tiene dos partes: el nombre de la cosa a definir (definition term) se coloca en la etiqueta <DT> </DT> y la definición en si misma (definition definition) en la etiqueta <DD> </DD>:

<DL>
    <DT> Palabra 1 </DT>
    <DD> La definición de la palabra 1 </DD>
    <DT> Palabra 2 </DT>
    <DD> La definición de la palabra 2 </DD>
</DL>

Este es un ejemplo de las tres clase de listas:

Al igual que casi todas las etiquetas HTML, las listas pueden anidarse, es decir, ponerse una dentro de otra:

<UL>
    <LI> Animales
        <UL>
            <LI> Mamíferos
                <UL>
                    <LI> Vaca </LI>
                    <LI> Leon </LI>
                </UL>
            </LI>
        </UL>
        <UL>
            <LI> Reptiles
                <UL>
                    <LI> Sapo </LI>
                    <LI> Serpiente </LI>
                </UL>
            </LI>
        </UL>
    </LI>
    <LI> Vegetales
        <UL>
            <LI> Cebolla </LI>
            <LI> Pino </LI>
        </UL>
    </LI>
</UL>

Que se vería así:

Las etiquetas UL, OL y DL forman BLOQUES, visualmente, crean un salto de línea tal y como lo hace la etiqueta P.

Aunque hay dos etiquetas más para definir listas, DIR y MENU, ya no se utilizan porque los navegadores las muestran como si fuesen listas no-ordenadas (UL). DIR fue originalmente creado para crear listas multicolumna y MENU para columnas simples.