XHTML-1.0: Listas

LISTA ORDENADA <ol>

HTML401 DTD-XHTML10T DTD-XHTML10S
Viñeta (type) Primer elemento (start)
Se trata de un elemento de bloque definido del tipo %lists que ha de contener uno o más elementos <li> que son las entradas de la lista. En oposición a la lista desordenada <ul>, la lista ordenada crea las entradas por defecto con números a partir del uno.

En XHTML Transicional existe además otro atributo compact para indicar al navegador que presente la lista de una forma visualmente más compacta, aunque no expondremos en este documento. Se aconseja usar estilos en lugar del atributo type. Sin embargo el atributo start no encuentra sustituto con estilos CSS 2.1.

Ejemplo <ol>

Lista ordenada con numeración por defecto, incluyendo una sublista en la segunda entrada. Entre el elemento <ol> y la primera entrada <li> no puede haber nada.
<ol>
    <li>Primera entrada</li>
    <li>Segunda entrada
        <ol>
            <li>Primera subentrada</li>
            <li>Segunda subentrada</li>
        </ol>
    </li>
    <li>Tercera entrada</li>
</ol>
Resultado:
  1. Primera entrada
  2. Segunda entrada
    1. Primera subentrada
    2. Segunda subentrada
  3. Tercera entrada

Tipo de viñeta <ol type = "x"> (XHTML transicional)

Este atributo de XHTML Transicional es del tipo %OLStyle pudiendo tomar los valores 1, A, a, I, i para establecer los símbolos de las viñetas con los que debe comenzar cada elemento de la lista. Con CSS puede usar estilo para dar tipos a las entradas de listas numeradas con {list-style-type}.

Ejemplo <ol type>

Presentamos ejemplos con diversos tipos de entradas con <ol type="x"> modificando el valor "x":
Resultado:
Lista con viñeta tipo 1:
  1. Primera entrada
  2. Segunda entrada
Lista con viñeta tipo A:
  1. Primera entrada
  2. Segunda entrada
Lista con viñeta tipo a:
  1. Primera entrada
  2. Segunda entrada
Lista con viñeta tipo I:
  1. Primera entrada
  2. Segunda entrada
Lista con viñeta tipo i:
  1. Primera entrada
  2. Segunda entrada

Primer elemento <ol start = "x"> (XHTML transicional)

Este atributo de XHTML Transicional es del tipo %Number que representa un número entero para establecer el valor inicial del primer elemento de la lista. En CSS 2.1 no hay previsto mecanismo alguno para modificar la numeración del primer elemento de la lista tal como hace este atributo.

Ejemplo <ol start>

Configuramos una lista ordenada con viñetas de letras (tipo a) pero hacemos que se inicie en la letra "c" que se corresponde con la tercera letra del alfabeto.
<ol type="a" start="3">
<li>Primera entrada</li>
<li>Segunda entrada</li>
</ol>
Resultado:
Lista con viñeta tipo a que iniciamos en la entrada 3 que corresponde a la letra "c":
  1. Primera entrada
  2. Segunda entrada

LISTA NO ORDENADA <ul>

HTML401 DTD-XHTML10T DTD-XHTML10S
Viñeta (type)
Se trata de un elemento de bloque definido del tipo %lists que ha de contener uno o más elementos <li> que son las entradas de la lista. En oposición a la lista ordenada <ol>, la lista no ordenada crea las entradas por defecto con viñetas como por ejemplo un círculo relleno (llamados también boliches).

En XHTML Transicional existe además otro atributo compact para indicar al navegador que presente la lista de una forma visualmente más compacta, aunque no expondremos en este documento. Se aconseja usar estilos en lugar del atributo type.

Ejemplo <ul>

Lista no ordenada con numeración por defecto, incluyendo sublistas en niveles segundo y tercero. Entre el elemento <ul> y la primera entrada <li> no puede haber nada. A medida que se desciende en niveles se van usando alternativamente tres viñetas: boliche, círculo y cuadrado. Sin embargo esto queda a elección del navegador y, de hecho, Opera sólo presenta círculos.
<ul>
    <li>Primera entrada nivel 1</li>
    <li>Segunda entrada nivel 1
        <ul>
            <li>Primera entrada nivel 2
                <ul><li>Primera entrada nivel 3</li></ul>
            </li>   
            <li>Segunda entrada nivel 2</li>
        </ul>
    </li>     
    <li>Tercera entrada nivel 1</li>
</ul>
Resultado:
  • Primera entrada nivel 1
  • Segunda entrada nivel 1
    • Primera entrada nivel 2
      • Primera entrada nivel 3
    • Segunda entrada nivel 2
  • Tercera entrada nivel 1

Tipo de viñeta <ul type = "x"> (XHTML transicional)

Este atributo de XHTML Transicional es del tipo %ULStyle pudiendo tomar los valores disc, circle, square para establecer los símbolos de las viñetas con los que debe comenzar cada elemento de la lista. Con CSS puede usar estilo para dar tipos a las entradas de listas no numeradas con {list-style-type}.

Ejemplo <ul type>

En este ejemplo presentamos valores con <ul type="x">.
Resultado:
Lista con viñeta tipo disc:
  • Primera entrada
  • Segunda entrada
Lista con viñeta tipo circle:
  • Primera entrada
  • Segunda entrada
Lista con viñeta tipo square:
  • Primera entrada
  • Segunda entrada

ENTRADA DE LISTA <li>

HTML401 DTD-XHTML10T DTD-XHTML10S
Viñeta (type) Cambiar numeración (value)
Se trata de un elemento sin tipo definido (es el contenido de los elementos <ol> y <ul>), representado una entrada de lista que puede contener a su vez elementos de flujo del tipo %Flow, es decir, tanto elemento de bloque como de línea.

Los atributos son de XHTML Transicionales. El primero type puede ser configurado con estilos, pero el segundo value no tiene una correspondencia con estilos.

Tipo de viñeta <li type = "x"> (XHTML transicional)

Se trata de un atributo de XHTML Transicional del tipo %LIStyle para especificar el tipo de viñeta para una única entrada de lista, que a su vez es una unión de los tipos:
  • %OLStyle, con los valores 1, A, a, I, i para entradas de lista numerada.
  • %ULStyle, con los valores disc, circle, square para entradas de lista no numerada.

Debería usarse CSS con {list-style-type} para este cometido.

Ejemplo <li type>

Aquí dotamos de viñeta círculo a una lista no ordenada y luego dotamos a la segunda entrada de una viñeta cuadrada que anula a la establecida en la lista.
<ul type="circle">
<li>Entrada primera</li>
<li type="square">Entrada segunda con un tipo de viñeta cuadrado</li>
<li>Sigue la entrada tercera</li>
</ul>
Resultado:
  • Entrada primera
  • Entrada segunda con un tipo de viñeta cuadrado
  • Sigue la entrada tercera

Cambiar numeración <li value = "x"> (XHTML transicional)

El valor de este atributo de XHTML Transicional es del tipo %Number para indicar un nuevo número de entrada de la lista. No es posible actuar con estilos CSS para el mismo efecto.

Ejemplo <li value>

Lista ordenada numérica cambiando el número de la segunda entrada del 2 al 5. Se observa que las entradas siguientes siguen la secuencia a partir de la modificada.
<ol>
<li>Entrada 1</li>
<li value="5">Entrada 2 renumerada a 5</li>
<li>Sigue otra entrada que se numera a partir de la anterior</li>
<li>Sigue otra entrada</li>
</ol>
Resultado:
  1. Entrada 1
  2. Entrada 2 renumerada a 5
  3. Sigue otra entrada que se numera a partir de la anterior
  4. Sigue otra entrada

LISTA DE DEFINICIÓN <dl>

HTML401 DTD-XHTML10T DTD-XHTML10S
Se trata de un elemento de bloque definido del tipo %lists que ha de contener uno o más elementos <dt> o <dl>, que se corresponden con términos de definición y entradas de definición respectivamente.

En XHTML Transicional existe además otro atributo compact para indicar al navegador que presente la lista de una forma visualmente más compacta, aunque no expondremos en este documento.

Ejemplo <dl>

En el resultado de este ejemplo vemos como los términos de definiciones que dotamos de negrita se separan en líneas aparte de las expresiones de definición que aparacen sangradas.
<dl>
    <dt><b>Aceleración</b></dt>
        <dd>Cambio en el valor...</dd>
    <dt><b>Amplitud</b></dt>
        <dd>La altura máxima...</dd>
    <dt><b>Antimateria</b></dt>
        <dd>Materia que tiene...</dd>
</dl>
Resultado:
Aceleración
Cambio en el valor o la dirección de la velocidad de un objeto.
Amplitud
La altura máxima del pico o cresta de una onda, o la profundidad máxima de carga de fuerza que es posible para una masa total determinada.
Antimateria
Materia que tiene las mismas propiedades gravitatorias que la materia ordinaria, pero con una carga eléctrica opuesta, así como cargas de fuerza nuclear opuestas.

TÉRMINO DE DEFINICIÓN <dt>

HTML401 DTD-XHTML10T DTD-XHTML10S
Se trata de un elemento sin tipo definido (es el contenido de una lista de definición <dl>), que a su vez puede contener elementos del tipo %inline de elementos en línea. Representa un término de definición usándose conjuntamente con el elemento <dd> para las expresiones de definición.
Ver ejemplo en <dl>

EXPRESIÓN DE DEFINICIÓN <dd>

HTML401 DTD-XHTML10T DTD-XHTML10S
Se trata de un elemento sin tipo definido (es el contenido de una lista de definición <dl>), que a su vez puede contener elementos del tipo %Flow de elementos en línea y en bloque. Representa una expresión de definición usándose conjuntamente con el elemento <dt> para los términos de definición.
Ver ejemplo en <dl>