Introducción a XHTML

Listas

Una lista para XHTML no es más que un agrupamiento o enumeración de elementos de información. XHTML soporta tres tipos de listas:

  1. Listas no numeradas
  2. Listas enumeradas
  3. Listas de definiciones
  4. Listas anidadas

1. Listas no numeradas

Las listas marcadas sirven para mostrar información agrupada y sin ningún orden particular:

Para hacer una lista, se debe utilizar la etiqueta <ul>; mientras que, para cada elemento de la lista debe utilizarse la etiqueta <li>:

<ul>
<li>Sr. Chema Pamundi</li>
<li>Sr. German Tequilla</li>
<li>Sr. Carmelo Coton</li>
<li>Sra. Carmen Tirosa</li>
</ul>

2. Listas numeradas

Las listas enumeradas u ordenadas se usarán para agrupar información en un orden específico.

Si el ordenador parece que no funciona:
  1. ¿Está conectado a la corriente?
  2. ¿Está el interruptor a ON?
  3. ¿Está la pantalla encendida?
  4. ¿Está la linea de alimentación caida?

Para hacer una lista enumerada, se deberá especificar con la etiqueta <ol>. Cada elemento de la lista estará contenida entre <li>...</li>:

<ol>
<li>¿Está conectado a la corriente?</li>
<li>¿Está el interruptor a ON?</li>
<li>¿Está la pantalla encendida?</li>
<li>¿Está la linea de alimentación caida?</li>
</ol>

3. Listas de definiciones

Las listas de de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones.

<b>
Negrita (bold).
<i>
Cursiva (italic).

Para formatear una lista de definiciones se usarán las etiquetas <dl>...</dl>. El término definido debe especificarse entre <dt>...</dt>, mientras que la definición debe especificarse entre <dd>...</dd>.

<dl>
<dt><strong>&lt;b&gt;</strong></dt>
<dd>Negrita (<em>bold</em>).</dd>
<dt><strong>&lt;i&gt;</strong></dt>
<dd>Cursiva (<em>italic</em>).</dd>
</dl>

4. Listas anidadas

Dentro de un elemento de lista (<li> ó <dd>) se puede especificar otra lista:

<ol>
<li>¿Está conectado a la corriente?
  <ul>
  <li>Sí</li>
  <li>No</li>
  </ul>
</li>
<li>¿Está el interruptor a ON?
  <ul>
  <li>Sí</li>
  <li>No</li>
  </ul>
</li>
</ol>

Se verá así:

  1. ¿Está conectado a la corriente?
    • No
  2. ¿Está el interruptor a ON?
    • No
Copyright © 2011-2012 Mariano Martín Nevado Términos de uso