[HTML] Listas

Las listas es uno de los elementos más visuales que podemos utilizar para mostrar texto en nuestra web, ya que mediante viñetas o numeración podemos dar al lector una serie de datos. Así pues, y como acabamos de mencionar, dichas listas podrán ser mostradas de manera ordenada o no ordenada.

LISTA DESORDENADA

Una lista desordenada mostrará una viñeta gráfica al lado de cada línea a mostrar. Para definirla, utilizaremos las etiquetas <UL> y </UL> encerrando entre ellas el contenido de cada línea. Además, definiremos cada línea con la etiqueta <LI> y </LI>.

El atributo del elemento UL es TYPE, el cual definirá si la viñeta a mostrar será un cuadrado (TYPE=SQUARE), un círculo (TYPE=CIRCLE) o un disco (TYPE=DISK). En CodePen tenemos un ejemplo con cada uno de estos valores; por defecto, el valor de TYPE es disk. Además, podremos usar el elemento <LH> para definir el título de la lista, el cual se escribirá antes del primer elemento <LI>.

LISTA ORDENADA

Al igual que la lista ordenada, mostrará las líneas una por una, con la diferencia que establecerá un orden previo a su visualización. Utilizaremos las etiquetas <OL> y </OL> para definir la lista, así como el elemento <LI> y </LI> para cada línea.

El atributo vuelve a ser TYPE, cuyos valores pueden ser:

  • A > El cual mostrará una letra mayúscula delante de cada elemento.
  • a > Mostrará una letra minúscula delante de cada elemento.
  • I > Mostrará los números romanos en mayúsculas.
  • i > Mostrará los números romanos en minúsculas.
  • 0 (cero) > Mostrará un número arábigo.

Además, podemos hacer uso del atributo START para indicarle cual será el primer elemento (si la lista empieza en 5, en G o en XXI). En CodePen, el ejemplo.

LISTA DE DEFINICIÓN

Se usa para las listas que tenga tipo de diccionario, es decir, un término con una o varias definiciones. Se define con <DL> y </DL>.Las etiquetas a usar serán:

  • <DT> Para introducir el término a definir.
  • <DD> Para la definición.

Ejemplo en CodePen.

28 años | Entrenador de fútbol | Informático&Web Design | Linuxero | Componente de @chirigotaninos | Creador de http://todobytes.es & http://sudosu.es | Apasionado de la historia

Facebook Twitter Google+ YouTube 

Related posts

Leave a Comment