Listas en XHTML

  • Oct
  • 16

3 comentarios! 199 palabras - 1 hits

Definiciones de elementos de listas en xhtml

Dentro de las etiquetas XHTML tenemos varias que nos permiten definir elementos de listas, basicamente son tres los tipos de listados que pueden ser representados mediante etiquetas:

Listas de Definiciones

Como se puede deducir este tipo de etiquetas se utilizan para crear listados de definiciones, la estructura a seguir para el maquetado seria la siguiente:

  1.  
  2.     <dl>
  3.       <dt>El titulo</dt>
  4.       <dd>La Definicion</dd>
  5.      </dl>
  6.  

Donde utlizamos la etiqueta <dl></dl> como contenedora del bloque y en la que solo se pueden incluir elementos de lista (dt, dd), la etiqueta <dt></dt> como titulo de la definicion y la etiqueta <dd></dd> como definicion.

Estas dos ultimas etiquetas normalmente contendran texto plano, pero podemos incluir casi cualquier etiqueta de maquetado (a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var)

Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
Orange
The fruit of an evergreen tree of the genus Citrus.

Listas Ordenadas y Desordenadas

A la hora de crear listas de elementos contamos con otro tipo de etiquetas que definen listados sencillos, tanto ordenados como desordenados.

En ambos casos la sintaxis a definir es la misma, una etiqueta que contendra el bloque (ol, ul) de elementos que a su vez estaran contenidos individualmente con la etiqueta <li></li>

Al utilizar listas simples cada elemento que incluya sera precedido por un numero en el caso de las listas ordenadas y por un punto en el caso de las listas desordenadas, esta propiedad se puede controlar mediante el atributo type.

Definiendo el tipo de señalador

Podemos utilizar tres estilos diferentes,

  • <li type="disc">
  • <li type="circle">
  • <li type="square">

Definiendo la ordenacion

Ademas de numeros tenemos otras opciones,

  • <ol type="1"> 1..2..3..
  • <ol type="a"> a..b..c..
  • <ol type="A"> A..B..C..
  • <ol type="i"> i..ii..iii..iv..
  • <ol type="I"> I..II..III..IV..

Semanticamente las listas desordenadas son un elemento perfecto para contener menus de navegacion que pueden ser decorados de innumerables maneras mediante css.

Etiquetas Descatalogadas

Ademas de estos tres tipos de lista, existen dos mas,

Se trata de la etiqueta <dir></dir> utilizada para crear listados de directorios y la etiqueta <menu></menu> que permite crear un menu vertical.

Tanto en las especificaciones XHTML 1.0 como en las de HTML 4.0 estas etiquetas han sido reemplazadas por la lista desordenada (ul)

Enlaces relacionados

3 comentarios

  • Oct
  • 16

# Escrito por Federico hace 4 años, 4 meses

¿Sos conciente de que podés evitar el atributo type y usar CSS? list-style-type, si mal no recuerdo. :)


  • Oct
  • 17

# Escrito por Alex Sancho hace 4 años, 4 meses

Eso en el proximo episodio ;)


  • Oct
  • 18

# Escrito por Federico hace 4 años, 4 meses

LOL! Entonces ponele “Spoiler” al principio de mi comentario. ;)


Escribe tu comentario

Puedes utilizar este formulario para escribir tu opinion sobre esta entrada, no existe ningun tipo de limitacion a la hora de enviar opiniones, tan solo sigue unas reglas basicas de cortesia y todos estaremos mas contentos.

Puedes identificarte utilizando OpenID, solo tienes que introducir tu URL OpenID en el siguiente campo y pulsar el boton de validar.





Instrucciones para los comentarios

El simbolo * indica que se trata de un campo obligatorio.

Este sitio usa Markdown junto con Smartypants para educar los textos, tambien esta disponible para los comentarios.

A continuación os muestro algunas de las equivalencias:

  • [enlace de ejemplo](http://example.com/) resulta enlace de ejemplo.
  • **Texto en Negrita**
  • _Italica_
  • > blockquote
  • > > nested blockquote
  • * Esto es un elemento de una lista desordenada (ul)
  • 1. Esto es un elemento de una lista ordenada (ol)

MC Puedes seguir las respuestas a tus comentarios con MyComments.