HTML 5, Curso Intensivo – Lección 04, Listas

HTML brinda 2 estructuras básicas para crear listas explicitas de elementos, las listas no ordenadas, que usualmente las conocemos como las listas con bullets ‘•’, y las listas ordenadas, que usan alguna clase de numeración para su organización.

Ejemplo de lista no ordenada:

Los principales descubrimientos de Albert Einstein Fueron:

• El movimiento Browniano.
• El efecto fotoeléctrico.
• La Relatividad Especial.
• Equivalencia masa-energía.
• Relatividad General.

Ejemplo de lista ordenada:

El índice temático de nuestro documento:

1. Infancia
2. Juventud
   1. Actividad política
3. Muerte

Listas No Ordenadas

Es el tipo de lista que se usa cuando los elementos a listar no necesitan estar en un orden especifico, por eso lasociacion con los bullets ‘•’.

Para adicionar una lista no ordenada a un documento HTML se usa el elemento <ul>, ‘ul’ significa unordered list o lista no ordenada; este elemento será el contenedor de los elementos a listar.

<ul>

</ul>

Elementos de lista

Con el elemento contenedor creado podemos adicionar los elementos de la lista, para eso usamos un elemento <li> para cada elemento de lista, ‘li’ significa list ítem o elemento de lista.

<ul>
    <li>El movimiento Browniano.</li>
</ul>

Listas Ordenadas

A diferencia de las listas no ordenadas,  este tipo de lista se usa cuando los elementos a listar tengan un orden especifico, se asocian con la numeración, 1, 2, 3….

Para adicionar una lista ordenada a un documento HTML se usa el elemento <ol>, ‘ol’ significa ordered list o lista ordenada; este elemento será el contenedor de los elementos a listar.

<ol>

</ol>

Los elementos de lista se adicionan igual que a una lista no ordenada, usando el elemento <li>

<ol>
    <li>Infancia</li>
</ol>

Listas Anidadas

Listas ordenadas o no ordenadas pueden ser anidadas si la jerarquía así lo requiere, creando listas multi-nivel. Simplemente se adiciona una nueva lista al elemento de lista que lo contiene:

Tengan en cuenta siempre visualizar la jerarquia.

<ol>
    <li>Infancia</li>
    <li>Juventud 
        <ol>
            <li> Actividad política</li>
	</ol>
    </li>
    <li>Muerte</li>
</ol>

Lista ordenada al revés

Es posible que se necesite que el conteo de una lista ordenada se desarrolle de manera inversa al original, para hacer esto usamos el atributo ‘reversed’. Este atributo es un nuevo tipo de atributo, a diferencia de los ya vistos, que requieren un nombre y un valor, este atributo se conoce como booleano, o un atributo que solo tiene 2 valores, verdadero o falso. Cuando escribimos el atributo se considera verdadero, si no esta presente se considera falso (de manera predeterminada es falso).

<ol reversed>
    <li>Infancia</li>
    <li>Juventud 
        <ol>
            <li> Actividad política</li>
	</ol>
    </li>
    <li>Muerte</li>
</ol>

Tipo de Numeración

De manera predeterminada las listas ordenadas usan la numeración Arabiga para enumerar los elementos de lista. En HTML se puede cambiar el tipo de numeración usada por letras ‘A’ o ‘a’, o por números romanos ‘I’ o ‘i’. sin embrago esto solo se debe hacer si el documento esta se usa para listar elementos legales o técnicos, si no es asi, se debe usa CSS.

<ol type=”A”>
    <li>Infancia</li>
    <li>Juventud 
        <ol>
            <li> Actividad política</li>
        </ol>
    </li>
    <li>Muerte</li>
</ol>