Revista Informática

Listas ordenadas, desordenadas y de definiciones en HTML

Publicado el 06 febrero 2014 por Liher

En este articulo os voy a explicar que son y como usar las listas ordenadas, las desordenadas y las de definiciones en HTML. Las listas se utilizan para enumerar elementos y nos pueden servir para muchas cosas, una de las mas útiles cuando empecemos a usar CSS sera la de hacer menús con ellas, pero eso lo explicare cuando haga el curso de CSS. De momento os voy a explicar estos tres tipos de listas y como usarlos.

Las listas desordenadas se caracterizan precisamente por lo que su propio nombre indica, no tienes una numeración y no tienen un orden establecido. Os pongo un ejemplo de una lista desordenada:

<ul> <li>Elemento 1 de la lista</li> <li>Elemento 2 de la lista</li> <li>Elemento 3 de la lista</li> </ul>

12345 <ul>  <li>Elemento1de la lista</li>  <li>Elemento2de la lista</li>  <li>Elemento3de la lista</li></ul>

Para hacer una lista desordenada se usa la etiqueta “ul” para iniciarla, luego ponemos cada elemento de la lista con la etiqueta “li”. Como podéis ver hay que iniciar dichas etiquetas y posteriormente cerrarlas. Al ejecutar el ejemplo anterior veremos lo siguiente en nuestro navegador:

 

lista-desordenada-html

 

Si os fijáis añade un circulo antes de cada elemento. Después de cada elemento de la lista hace también un salto de linea automático para mostrar el siguiente elemento. Cuando lo ejecutéis veréis también que añade antes de cada elemento una tabulacion o espacio en blanco. El circulo se puede cambiar poniéndole un atributo que se llama “type” con tres valores posibles que son:

  • circle – nos mostrara un circulo vacío antes de cada elemento
  • disc – mostrara un circulo relleno antes de cada elemento
  • square – mostrara un cuadrado antes de cada elemento

Las listas también se pueden anidar, es decir, poner listas con varios niveles. Esto se hace abriendo una nueva lista dentro de un “li”, hay que tener cuidado con donde cerramos las etiquetas para hacer una lista anidada. Os pongo un ejemplo de una lista anidad y cambio también el “type” a “square” y vemos las dos cosas juntas:

<ul type="square"> <li>Elemento 1 de la lista <ul> <li>Elemento 1.1 de la lista</li> <li>Elemento 1.2 de la lista</li> </ul> </li> <li>Elemento 2 de la lista</li> <li>Elemento 3 de la lista</li> </ul>

12345678910 <ul type="square">  <li>Elemento1de la lista  <ul>  <li>Elemento1.1de la lista</li>  <li>Elemento1.2de la lista</li>  </ul>  </li>  <li>Elemento2de la lista</li>  <li>Elemento3de la lista</li></ul>

Fijaros bien que en el primer “li”, sin cerrarlo, iniciamos otra lista con “ul” y cerramos el “li” anterior después de cerrar el “ul” del subnivel, puede parecer difícil pero no lo es, solo tenéis que mirar detenidamente el código HTML  y lo veréis. Podemos poner tantos niveles y subniveles como queramos siempre y cuando vigilemos bien las aperturas y los cierres de las etiquetas. Esto lo explicare mejor en el video que teneis al final del articulo y lo vereis mas fácil.

Las siguiente listas que vamos a ver son las listas ordenadas. En las ordenadas los elemento van precedidos de una numeracion, es la unica diferencia. Para hacer una lista ordenada se hace de la siguiente forma:

<ol> <li>Elemento 1 de la lista <ol> <li>Elemento 1.1 de la lista</li> <li>Elemento 1.2 de la lista</li> </ol> </li> <li>Elemento 2 de la lista</li> <li>Elemento 3 de la lista</li> </ol>

12345678910 <ol>  <li>Elemento1de la lista  <ol>  <li>Elemento1.1de la lista</li>  <li>Elemento1.2de la lista</li>  </ol>  </li>  <li>Elemento2de la lista</li>  <li>Elemento3de la lista</li></ol>

Esta lista que os he puesto es igual que la anterior pero ordenada, solo habría que cambiar la etiqueta “ul” por “ol” y ya esta. Este ejemplo también tiene una lista anidada como el anterior. Podemos definir el atributo “type” a la lista para que nos muestre diferentes opciones antes de cada elemento. Los posibles valores del atributo “type” para las listas ordenadas son:

  • 1 – nos mostrara numero antes de cada elemento
  • a – nos mostrara letras antes de cada elemento
  • A – nos mostrara letras mayúsculas antes de cada elemento
  • i – nos mostrara numero romanos antes de cada elemento
  • I – nos mostrara numero romanos en mayúsculas antes de cada elemento

Esto lo veréis mejor en el vídeo ya que allí probare todos los atributos para que veáis los resultados.

El ultimo tipo de listas que vamos a usar son las listas de definiciones, que aunque no se usan demasiado no esta mal conocerlas, sirven para enumerar elementos y añadir una descripción de cada uno de ellos. La sintaxis de las listas de definiciones es así:

<dl> <dt>Ferrari</dt> <dd>Es una marca de coches italiana</dd> <dt>Audi</dt> <dd>Es una marca de coches alemana</dd> </dl>

123456 <dl>  <dt>Ferrari</dt>  <dd>Es una marca de coches italiana</dd>  <dt>Audi</dt>  <dd>Es una marca de coches alemana</dd></dl>

Iniciamos la lista de definiciones con la etiqueta “dl”, luego enumeramos cada elemento con “dt” y la descripción correspondiente al elemento con “dd”. Como en las anteriores listas hay que tener cuidado con el cierre de las etiquetas.

Para que veáis todo esto con ejemplos os dejo el vídeo que he colgado en mi canal de Youtube:

 

Imagen de previsualización de YouTube

 

Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.

 


Volver a la Portada de Logo Paperblog