Módulo 2 - Lección 12 - HTML: Listas

Existen tres tipos de listas:

<ul> Listas No ordenadas
unorfered list

El orden de aparición no es importante

Cada elemento de la lista se define con <li> list item
Los elementos se indican con simbolos (circulos, cuadrados, etc.), para cambiar estos símbolos debe utilizarse CSS. No utilizar el atributo type.

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

·       Elemento 1

·       Elemento 2

·       Elemento 3

<ol> Listas ordenadas

El orden de aparición es importante

Cada elemento de la lista se define con <li> list item
Los elementos se indican con números o letras.

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ol>

1.     Elemento 1

2.     Elemento 2

3.     Elemento 3

Atributos en HTML 4/5

- start que indica el número inicial de la lista

- type (a,b,c,d...),(i,ii,iii,iv,...)

Atributos en HTML5

- reversed atributo booleano que permite indicar que la numeración debe ser descendente

<dl> Listas de descripción

Se emplean para definir una lista de terminos con cero o más descripciones por cada término.

Cada término de la lista se define con <dt>

Cada descripción de un término se define con <dd>

Los elementos no se indican con símbolos, números o letras, sino con un aumentos en el margen izquierdo de la lista

<dl>

<dt> Primer elemento</dt>

<dd> Descripción del primer elemento </dd>

<dd> Otra descripción para el primer elemento </dd>

<dt> Segundo elemento</dt>

<dd> Descripción del Segundo elemento </dd>

</dl>

            Primer elemento

                        Descripción del primer elemento

                        Otra descripción para el primer elemento

            Segundo elemento

                        Descripción del segundo elemento

Listas anidadas

Es una lista dentro de otra. Se pueden combinar de cualquier forma.
La lista que está dentro de otra se llama sublista.

<ul>

<li>Elemento 1</li>

            <ol>

    <li>SubElemento 1.1</li>

            <li>subElemento 1.2</li>

    </ol>

<li>Elemento 2</li>

            <ul>

    <li>SubElemento 2.1</li>

            <li>subElemento 2.2</li>

    </ul>

<li>Elemento 3</li>

</ul>

• Elemento 1
1. SubElemento 1.1
2. subElemento 1.2
• Elemento 2

• SubElemento 2.1
• subElemento 2.2
• Elemento 3