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 laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.
Véase elAviso de copyright de la traducción.
Contenidos
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 elementoUL:
<UL><LI>Información no ordenada. <LI>Información ordenada. <LI>Definiciones. </UL>
Una lista ordenada, creada por medio del elementoOL, debería contener información para la cual debe ponerse énfasis en el orden, como en una receta de cocina:
Las listas de definiciones, creadas por medio del elementoDL, 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:
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):
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.
<!ELEMENTUL - - (LI)+ -- lista no ordenada --><!ATTLIST UL%attrs; --%coreattrs,%i18n,%events -- ><!ELEMENTOL - - (LI)+ -- lista ordenada --><!ATTLIST OL%attrs; --%coreattrs,%i18n,%events -- >
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Etiqueta inicial:obligatoria, Etiqueta final:opcional
Definiciones de atributos
Atributos definidos en otros lugares
Las listas ordenadas y las no ordenadas se representan de idénticamanera, excepto en que los agentes de usuario visuales numeran los objetos de laslistas ordenadas. Los agentes de usuario pueden presentar estos números dediferentes formas. Las listas no ordenadas no se numeran.
Ambos tipos de lista se componen de secuencias de objetos de lista definidospor el elementoLI (cuya etiquetafinal 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 listaspueden 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ónde una lista donde acabó una lista anterior, así como tampoco ocultar lanumeración para un objeto de la lista. Sin embargo, los autores pueden inicializarel número de un objeto de la lista estableciendo su atributovalue. La numeración de los objetos de listasubsiguientes 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>
<!-- listas de definiciones - DT para el término, DD para su definición --><!ELEMENTDL - - (DT|DD)+ -- lista de definiciones --><!ATTLIST DL%attrs; --%coreattrs,%i18n,%events -- >
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
<!ELEMENTDT - O (%inline;)* -- término definido --><!ELEMENTDD - 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 tiposde listas, en que los objetos de lista consisten en dos partes: un términoy una descripción. El término viene dado por el elementoDTy está restringido a contenido en línea. La descripción viene dada por unelementoDDque 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
Nota. Lo que sigue es una descripción informativa delcomportamiento 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únsu nivel de anidamiento.
Tanto paraOL como paraUL, el atributotype especifica las opciones de representación paralos agentes de usuario visuales.
Para el elementoUL, losvalores posibles del atributotype sondisc (disco),square (cuadrado), ycircle (círculo). El valor por defecto depende del nivel de anidamientode 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. Losagentes de usuario deberían intentar presentar un "disc" como un pequeño círculorelleno, un "circle" como un pequeño círculo vacío, y un "square" como unpequeño cuadrado vacío.
Un agente de usuario gráfico podría hacer las siguientes representaciones:
para elvalor "disc"
para el valor"circle"
parael valor "square"
Para el elementoOL, los valores posibles del atributotypese 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 atributotype estádesaprobado y quelos 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 elementosOL 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><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 unNerd o unGeekHacker un programador inteligenteNerd técnicamente brillante pero socialmente inútil
DIR y MENU estándesaprobados.
Véase elDTD Transicional para sudefinición formal.
Atributos definidos en otros lugares
El elementoDIR fue diseñado para crear listas multicolumna de directorios. ElelementoMENU fue diseñado para listas de menú de una sola columna.Ambos elementos tienen la misma estructura queUL, y únicamente varía surepresentación. En la práctica, un agente de usuario representará una listaDIR oMENU exactamente igual que una listaUL.
Recomendamos encarecidamente usarUL en lugar de estos elementos.