Listas de elementos

Muchas veces queremos hacer una lista de nuestros productos, numerar capítulos... Y todo esto se puede hacer con distintos tipos de listas:

 

Listas Desordenadas: Se usa la etiqueta <ul> (y la etiqueta de cierre). Ul proviene de las palabras en inglés unorder list (lista desordenadas). Cada elemento se pone con la etiqueta <li>, sin etiqueta de cierre.

 

<p>Países distribuidores</p>
<ul>
<li>México
<li>Estados Unidos
<li>Canadá
</ul>
</p>

 

Resultado:

 

Países distribuidores

· México

· Estados Unidos

· Canadá

 

También podemos cambiar el tipo de viñeta (el punto), hay tres tipos:

circle

square

disc

 

Estos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:

<ul type="square">
<li>México
<li type="circle">Estados Unidos
<li>Canadá
</ul>

 

Resultado:

¨ México

¨ Estados Unidos

¨ Canadá

 

 

Listas Ordenadas: Se hacen con la etiqueta <ol> (y su etiqueta de cierre). Ol proviene de la palabra en inglés Ordered List (lista ordenada).
Como la otra lista, cada elemento se pone con
<li>:

<p>Reglas</p>
<ol>
<li>No fumar
<li>No gritar
<li>Tener paciencia
</ol>

 

Resultado:

Reglas

1. No fumar

2. No gritar

3. Tener paciencia

 

Así como para la listas desordenadas se puede cambiar el tipo de viñeta, en listas ordenadas se puede cambiar el tipo de numeración que se indique en el atributo type y pueden ser:


1 Ordena con números
a Ordena alfabéticamente en minúsculas
A Ordena alfabéticamente en mayúsculas
i Ordena con números romanos en minúsculas
I Ordena con números romanos en mayúsculas

 

<p>Ordenamos por numeros</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>

<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>

Resultado:

Ordenamos por números

I. Elemento I

Elemento II

Ordenamos por letras

A. Elemento A

Elemento B

 

 

Unidad 2