Aunque casi todos los CMS como por ejemplo WordPress o Blogger permiten hacer listas mediante un click en un botón en la barra de edición de entradas, nunca está de más saber su estructura, que es bien simple, y los distintos valores que podemos asignar a sus atributos para tener un total control sobre estas etiquetas HTML. Las listas HTML serían lo que son “Numeración y viñetas” en los procesadores de texto.
Listas no ordenadas.
Etiqueta: <ul></ul>
Elemento: <li></li>
Atributo: type=
Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y para finalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrará con un círculo relleno. Lo más común es que dicho atributo se le asigne a la lista pero también se le puede añadir a cada elemento en particular. La etiqueta <li> que indica un nuevo elemento en la lista. Con el atributo “type” se indica que viñeta debe visualizarse pudiendo ser un círculo vacío, un cuadrado relleno o un círculo relleno.
Atributo type=: “circle”, “disc” o “square”
Ejemplo:
<ul type=”disc”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ul>
Resultado:
Listas ordenadas.
Etiqueta: <ol></ol>
Elemento: <li></li>
Atributo: type=
Atributo: value=
Atributo: start=
Es más amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos. El atributo start es utilizado para los elementos, mientras que type y value para la lista.
Atributo type: define el tipo de lista ordenada y sus valores pueden ser “I” para que la numeración sea de números romanos en mayúscula; “i” números romanos en minúscula; “A” o “a” para obtener ordenamiento alfabético; “1″ para numeración con números.
Atributo value: establece a partir de que valor comienza la lista. Su valor sólo puede ser numérico; Ej.: value=”4″ como resultado la el primer elemento de la lista será “4.”. Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>.
Atributo start: su valor sólo puede ser numérico. Al utilizarlo al comienzo de la lista se asume que la misma es del tipo numérica y sirve para indicar a partir de que número se empieza. No es combinable con los otros atributos.
Algunos ejemplos:
<ol type=”A” start=”1″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
- Manzanas
- Naranjas
- Peras
<ol type=”I”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
- Manzanas
- Naranjas
- Peras
<ol>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
- Manzanas
- Naranjas
- Peras
Las listas pueden anidarse, lo que implica simplemente crear otra lista dentro de una lista. Hay otro tipo de lista, la llamada lista de definición <dl> que no se usa casi nunca pero vale mencionarla.
Para practicar un editor HMTL online que recomiendo: http://www.it.uc3m.es/~amillares/editor/
Por ejemplo ingresa a esa página y copia y pega lo siguiente:
<HTML>
<ol type=”I” start=”5″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
</HTML>
Y presiona el botón “Submit” para ver el resultado.
