Tutorial: Listas en HTML : Mundi Lima

El lenguaje HTML nos brinda una serie de elementos que nos permiten elaborar párrafos estructurados de múltiples formas. Las conocemos como listas, y pueden ser de varios tipos: Listas ordenadas, no ordenadas, de definiciones y otros dos tipos menos conocidos debido al desuso de las mismas que son los menús y los directorios.

En este articulo trataremos como realizar las listas de los tres primeros tipos, dado que como dijimos las dos ultimas ya no se usan.

Listas ordenadas <ol>:

Las listas ordenadas, como nos indica su nombre nos permiten disponer los elementos de manera que cada uno tengo un predecesor numerado. Podemos ver el siguiente ejemplo:

Primero
Segundo
Tercero
Cuarto
......

Correspondiendole el siguiente código en HTML:

<ol>
<li> Primero </li>
<li> Segundo </li>
<li> Tercero </li>
<li> Cuarto </li>
<li> ...... </li>
</ol>

Si observáis, podéis distinguir que todo el código que encierran las etiquetas <ol> y </ol>, son todas <li>, por lo que es fácil deducir que para añadir mas elementos a la lista solo debéis repetir esta última etiqueta.

Listas desordenadas <ul>:

Estas listas se caracterizan por no tener una enumeración que indique un orden de manera estricta por lo que nos sirven para listar elementos de cualquier genero. Podemos ver el siguiente ejemplo:

ABCDEF
GHIJK
LMNÑOP
QRSTUV
........

Correspondiendole el siguiente código en HTML:

<ul>
<li> ABCDEF </li>
<li> GHIJK </li>
<li> LMNÑOP </li>
<li> QRSTUV </li>
<li> ........ </li>
</ul>

Con las listas no ordenadas ocurre lo mismo que las anteriores, solo es necesario duplicar la etiqueta <li>, para añadir mas objetos a la lista. A diferencia de las anteriores las no ordenadas comienzan y terminan con las etiquetas <ul> y </ul> respectivamente.

Listas de definiciones <dl>:

Por ultimo explicaremos como formar una lista de definiciones, que viene a ser lo mas parecido al formato de un diccionario, donde escribimos un termino y bajo él su definición. Podemos ver el siguiente ejemplo:

Vocales: AEIOU
Consonantes: BCDFGHJ...
Números: 123456...

Correspondiendole el siguiente código en HTML:

<dl>
<dt>Vocales </dt>
<dd> AEIOU </dd>
<dt>Consonantes </dt>
<dd> BCDFGHJ... </dd>
<dt>Números </dt>
<dd> 123456... </dd>
</dl>

Este último tipo de lista tiene una estructura completamente diferente. Estas comienzan y terminan con las etiquetas <dl> y </dl>, pero el código que encierran en esta ocasión se compone de dos etiquetas distintas, <dt> y <dd> siendo la primera la correspondiente al termino y la segunda a la definición.

Llegados a este punto ya somos capaces de crear nuestras propias listas del tipo que queramos, sin embargo, todavía queda mucho por aprender como etiquetas adicionales o propiedades de las mismas que veremos a continuación.

En primer lugar, existen dos etiquetas adicionales la cual nos permite incrustar un titulo o texto en cualquier lugar de la lista, siempre y cuando se encuentre dentro de las etiquetas principales (<ol>, <ul> o <dt>). Estas etiquetas son <lh> y <dh>, la primera para las listas ordenadas y no ordenadas y la segunda para las listas de definiciones.

Y en segundo lugar tenemos los atributos que se les pueden aplicar a las etiquetas para darnos una mayor funcionalidad, todos estos atributos se sitúan entre las comillas de la propiedad style="atributo1, atributo2, ...", a continuación se listan con su respectiva descripción:

list-style-type: estilo --> Este atributo especifica el estilo de un objeto de lista. Los valores disponibles son los siguientes:

Para listas ordenadas:

decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

Para listas no ordenadas:

disc
circle
square

start = numero; --> Sólo para listas ordenadas, <ol>. Este atributo especifica el número del primer objeto de una lista ordenada. El número inicial por defecto es el "1".

value = número; --> Sólo para objetos de lista, <li>. Este atributo establece el número del objeto de lista actual.

skip = número; --> avanzará la lista en cantidades de número.

Hay alguno mas que paras un conocimiento básico no los he considerado necesarios, de todas maneras al final del articulo se disponen una serie de link de los cuales me he servido por si deseáis profundizar en el tema.

Una vez abarcado todo lo necesario para poder construir nuestras listas de todas las maneras posibles, dispongámonos a aplicar todo lo aprendido de manera que haremos una serie de listas anidadas con todos los atributos anteriores:

TIPOS DE LISTAS

Listas ordenadas

Primero

Segundo
Tercero
Cuarto
......

Listas no ordenadas

ABCDEF

GHIJK
LMNÑOP
QRSTUV
........

Listas de definicion

Vocales

Abiertas

Cerradas

Consonantes

BCDFGHJ...

Números

123456...

Siendo este el código correspondiente en HTML:

<dl>
<dh>TIPOS DE LISTAS</dh>
<dt>Listas ordenadas </dt>
<dd>
<ol>
<li> Primero </li>
<ul TYPE = square COMPACT>
    <li> A </li>
    <li> B </li>
    <li> C </li>
</ul>
<li> Segundo </li>
<li> Tercero </li>
<li> Cuarto </li>
<li> ...... </li>
</ol>
</dd>
<dt>Listas no ordenadas </dt>
<dd><ul type = circle>
<li> ABCDEF </li>
 <ol style="list-style-type: upper-roman" START = 2>
     <li> 1 </li>
     <li> 2 </li>
     <li> 3 </li>
     <li VALUE = 9> 4 </li>
 </ol>
<li> GHIJK </li>
<li> LMNÑOP </li>
<li> QRSTUV </li>
<li> ........ </li>
</ul></dd>
<dt>Listas de definicion</dt>
<dd>
<dl>
<dt>Vocales </dt>
<dd><ul>
     <li> Abiertas </li>
     <ol>
      <li> A </li>
      <li> O </li>
     </ol>
     <li> Cerradas </li>
     <ol>
      <li> E </li>
      <li> I </li>
      <li> u </li>
    </ol>
   </ul>
 </dd>
<dt>Consonantes </dt>
 <dd> BCDFGHJ... </dd>
<dt>Números </dt>
 <dd> 123456... </dd>
</dl></dd>
</dl>

Con todo terminamos y espero que os sea de utilidad, si tenéis alguna duda comentadlo que como digo siempre estamos dispuestos a ayudaros en lo que este en nuestras manos.

Importante, se me olvidaba comentaros un detalle, para aquellos que vayáis a usar las listas en Blogger, debéis escribir el código de manera continua y no como aparecen en los ejemplos, es decir cada etiqueta detrás de otra, dado que si no, os interpretará también los saltos de linea y os dejara espacios entre los objetos de la lista o cosas mas extrañas. Si queréis una explicación, no la tengo, aunque muchos sabemos que el editor de Blogger es algo, digamos caprichoso.

Link: Listas en documentos HTML