Espónsor - Hosting barato en MasBaratoImposible.com - 2000 MB, 25 GB, 1,95 euros/mes
Hosting de Alta Capacidad

10 Listas

Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.

Véase el Aviso de copyright de la traducción.

Contenidos

  1. Introducción a las listas
  2. Listas no ordenadas (UL), listas ordenadas (OL) y objetos de lista (LI)
  3. Listas de definiciones: los elementos DL, DT y DD
    1. Representación visual de las listas
  4. Los elementos DIR y MENU

10.1 Introducción a las listas

HTML ofrece a los autores varios mecanismos para especificar listas de información. Todas las listas deben contener uno o más objetos de lista. Las listas pueden contener:

La lista anterior, por ejemplo, es una lista no ordenada, creada con el elemento UL:

<UL>
<LI>Información no ordenada. 
<LI>Información ordenada. 
<LI>Definiciones. 
</UL>

Una lista ordenada, creada por medio del elemento OL, debería contener información para la cual debe ponerse énfasis en el orden, como en una receta de cocina:

  1. Mezcle los ingredientes secos íntimamente.
  2. Vierta los ingredientes líquidos.
  3. Remueva durante 10 minutos.
  4. Hornee durante una hora a 300 grados.

Las listas de definiciones, creadas por medio del elemento DL, consisten generalmente en una serie de parejas término/definición (si bien las listas de definiciones pueden tener otras aplicaciones). Por ejemplo, se podría usar una lista de definiciones en la publicidad de un producto:

Menor coste
¡La nueva versión de este producto cuesta mucho menos que la versión anterior!
Más fácil de usar
¡Hemos cambiado el producto para que sea mucho más fácil de usar!
Seguro para los niños
Puede dejar a sus hijos solos en una habitación con este producto y no se harán daño (no lo garantizamos).

Esto se define en HTML como sigue:

<DL>
<DT><STRONG>Menor coste</STRONG>
<DD>¡La nueva versión de este producto cuesta mucho menos que la versión anterior!
<DT><STRONG>Más fácil de usar</STRONG>
<DD>¡Hemos cambiado el producto para que sea mucho más fácil de usar!
<DT><STRONG>Seguro para los niños</STRONG>
<DD>Puede dejar a sus hijos solos en una habitación con este producto
    y no se harán daño (no lo garantizamos).
</DL>

Las listas pueden además estar anidadas, pudiendo usarse al mismo tiempo tipos diferentes de listas, como en el ejemplo siguiente, que es una lista de definiciones que contiene una lista no ordenada (los ingredientes) y una lista ordenada (los pasos a seguir):

Ingredientes:
Pasos a seguir:
  1. Mezcle los ingredientes secos íntimamente.
  2. Vierta los ingredientes líquidos.
  3. Remueva durante 10 minutos.
  4. Hornear durante una hora a 300 grados.
Notas:
Puede añadir uvas para mejorar la receta.

La presentación exacta de los tres tipos de listas depende del agente de usuario. Desaconsejamos a los autores el uso de listas únicamente con el fin de dar sangría al texto. Éste es un aspecto estilístico que se se resuelve apropiadamente con hojas de estilo.

10.2 Listas no ordenadas (UL), listas ordenadas (OL) y objetos de lista (LI)

<!ELEMENT UL - - (LI)+                 -- lista no ordenada -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- lista ordenada -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT LI - O (%flow;)*             -- objeto de lista -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: opcional

Definiciones de atributos

type  =  información de estilo [CI]
Desaprobado. Este atributo especifica el estilo de un objeto de lista. Los valores disponibles son para los agentes de usuario visuales. Los valores posibles se describen más abajo (junto con la información sobre las diferencias entre mayúsculas y minúsculas).
start = number [CN]
Desaprobado. Sólo para OL. Este atributo especifica el número del primer objeto de una lista ordenada. El número inicial por defecto es el "1". Obsérvese que si bien el valor de este atributo es un entero, el rótulo correspondiente puede no ser numérico. Así, por ejemplo, cuando el estilo de objeto de lista es de letras latinas mayúsculas (A, B, C, ...), start=3 significa "C". Cuando el estilo es de numerales romanos en minúsculas, start=3 significa "iii", etc.
value = number [CN]
Desaprobado. Sólo para LI. Este atributo establece el número del objeto de lista actual. Obsérvese que si bien el valor de este atributo es un entero, el rótulo correspondiente puede no ser numérico (véase el atributo start).
compact [CI]
Desaprobado. Si está establecido, este atributo booleano indica a los agentes de usuario visuales que representen la lista de un modo más compacto. La interpretación de este atributo depende del agente de usuario.

Atributos definidos en otros lugares

Las listas ordenadas y las no ordenadas se representan de idéntica manera, excepto en que los agentes de usuario visuales numeran los objetos de las listas ordenadas. Los agentes de usuario pueden presentar estos números de diferentes formas. Las listas no ordenadas no se numeran.

Ambos tipos de lista se componen de secuencias de objetos de lista definidos por el elemento LI (cuya etiqueta final puede omitirse).

Este ejemplo ilustra la estructura básica de una lista.

<UL>
   <LI> ... primer objeto de lista...
   <LI> ... segundo objeto de lista...
   ...
</UL>

Las listas pueden además estar anidadas:

EJEMPLO DESAPROBADO:

<UL>
     <LI> ... Nivel uno, número uno...
     <OL> 
        <LI> ... Nivel dos, número uno...
        <LI> ... Nivel dos, número dos...
        <OL start="10"> 
           <LI> ... Nivel tres, número uno...
        </OL> 
        <LI> ... Nivel dos, número tres...
     </OL> 
     <LI> ... Nivel uno, número dos...
</UL>

Detalles sobre el orden de los números. En las listas ordenadas, no es posible reanudar automáticamente la numeración de una lista donde acabó una lista anterior, así como tampoco ocultar la numeración para un objeto de la lista. Sin embargo, los autores pueden inicializar el número de un objeto de la lista estableciendo su atributo value. La numeración de los objetos de lista subsiguientes continúa a partir del nuevo valor. Por ejemplo:

<ol>
<li value="30"> hace que éste sea el objeto de lista número 30.
<li value="40"> hace que éste sea el objeto de lista número 40.
<li> hace que éste sea el objeto de lista número 41.
</ol>

10.3 Listas de definiciones: los elementos DL, DT y DD

<!-- listas de definiciones - DT para el término, DD para su definición -->

<!ELEMENT DL - - (DT|DD)+              -- lista de definiciones -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT DT - O (%inline;)*           -- término definido -->
<!ELEMENT DD - O (%flow;)*             -- descripción de la definición -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: opcional

Atributos definidos en otros lugares

Las listas de definiciones sólo difieren levemente de los otros tipos de listas, en que los objetos de lista consisten en dos partes: un término y una descripción. El término viene dado por el elemento DT y está restringido a contenido en línea. La descripción viene dada por un elemento DD que contiene contenido en bloque.

Aquí tenemos un ejemplo:

  
<DL>
  <DT>Dweeb
  <DD>persona joven y excitable que puede madurar y convertirse
      en un <EM>Nerd</EM> o en un <EM>Geek</EM>

  <DT>Hacker
  <DD>un programador inteligente

  <DT>Nerd
  <DD>técnicamente brillante pero socialmente inútil

</DL>

Aquí tenemos un ejemplo con términos y definiciones múltiples:

<DL>
   <DT>Center
   <DT>Centre
   <DD> A point equidistant from all points
        on the surface of a sphere.
   <DD> In some field sports, the player who
        holds the middle position on the field, court,
        or forward line.
</DL>

Otra aplicación de DL es, por ejemplo, dar formato a un diálogo, de modo que cada DT identifica al hablante, y cada DD contiene sus palabras.

10.3.1 Representación visual de las listas

Nota. Lo que sigue es una descripción informativa del comportamiento de algunos agentes de usuario visuales al dar formato a las listas. Las hojas de estilo permiten un mejor control sobre formato de las listas (p.ej., su numeración, convenciones dependientes del idioma, sangrías, etc.).

Los agentes de usuario visuales suelen sangrar la listas anidadas según su nivel de anidamiento.

Tanto para OL como para UL, el atributo type especifica las opciones de representación para los agentes de usuario visuales.

Para el elemento UL, los valores posibles del atributo type son disc (disco), square (cuadrado), y circle (círculo). El valor por defecto depende del nivel de anidamiento de la lista actual. Estos valores no distinguen entre mayúsculas y minúsculas.

El modo en que se presenta cada valor depende del agente de usuario. Los agentes de usuario deberían intentar presentar un "disc" como un pequeño círculo relleno, un "circle" como un pequeño círculo vacío, y un "square" como un pequeño cuadrado vacío.

Un agente de usuario gráfico podría hacer las siguientes representaciones:

Una posible representación de un discopara el valor "disc"
Una posible representación de un círculopara el valor "circle"
Una posible representación de un cuadradopara el valor "square"

Para el elemento OL, los valores posibles del atributo type se resumen en la siguiente tabla (la diferencia entre mayúsculas y minúsculas es importante):

Tipo Estilo de numeración
1 números arábigos 1, 2, 3, ...
a alfabética en minúsculas a, b, c, ...
A alfabética en mayúsculas A, B, C, ...
i números romanos en minúsculas i, ii, iii, ...
I números romanos en mayúsculas I, II, III, ...

Obsérvese que el atributo type está desaprobado y que los estilos de las listas deberían especificarse mediante hojas de estilo.

Por ejemplo, usando CSS se puede especificar que el estilo de los números de los objetos de lista de una lista numerada debería ser numerales romanos en minúsculas. En el extracto de a continuación, todos los elementos OL que pertenezcan a la clase "conromanos" tendrán numerales romanos delante de los objetos de la lista.

<STYLE type="text/css">
OL.conromanos { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="conromanos">
<LI> Paso uno ...  
<LI> Paso dos ...
</OL>
</BODY>

La representación de una lista de definiciones también depende del agente de usuario. El ejemplo:

<DL>
  <DT>Dweeb
  <DD>persona joven y excitable que puede madurar y convertirse
      en un <EM>Nerd</EM> o un <EM>Geek</EM>

  <DT>Hacker
  <DD>un programador inteligente

  <DT>Nerd
  <DD>técnicamente brillante pero socialmente inútil
</DL>

podría representarse como sigue:

Dweeb
       persona joven y excitable que puede madurar y convertirse en un Nerd o un Geek
Hacker
       un programador inteligente
Nerd
       técnicamente brillante pero socialmente inútil

10.4 Los elementos DIR y MENU

DIR y MENU están desaprobados.

Véase el DTD Transicional para su definición formal.

Atributos definidos en otros lugares

El elemento DIR fue diseñado para crear listas multicolumna de directorios. El elemento MENU fue diseñado para listas de menú de una sola columna. Ambos elementos tienen la misma estructura que UL, y únicamente varía su representación. En la práctica, un agente de usuario representará una lista DIR o MENU exactamente igual que una lista UL.

Recomendamos encarecidamente usar UL en lugar de estos elementos.