Listas en xhtml :

Listas xhtml

Para que una lista de ítems cumpla su funcionalidad semántica la W3C recomienda usar unos tipos de listas y desaconseja el uso de otras, en seguida vamos a ver como crear listas semánticamente correctas en xhtml strict.

Listas de definiciones:

Muchas veces tenemos que listar elementos compuestos por un título y un párrafo, pero que en realidad no dejan de ser una lista, ejemplo:

  1. Elemento 1:descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista
  2. Elemento 2:descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista
    para estos casos lo primero que se nos puede ocurrir es usar una lista
      <ol>con <br />
    dentro de los <p> </p>
    Es decir:  

    <ol>

    <li>Elemento 1:<br />

    descripción de la lista</li>

    </ol>
    pues aunque esto cumpla visualmente el objetivo, semánticamente no se entiende que el primero elemento es un título de lista y el segundo es su descripción, es decir no cumplen la accesibilidad por tanto la W3C propone usar las etiquetas <dl><dt /><dd> :
     <dl> introduce una lista de definición (dl = definition   list = lista de definición).

        <dt> introduce la   expresión a definir (dt = definition (list) term = expresión en una lista de   definición).

        <dd> introduce una definición de una   expresión (dd = definition (list) definition = definición en una lista de   definición).

        </dl> cierra la lista. Las etiquetas de   cierre </dt> y </dd> pueden ser omitidas,   pero no es aconsejable. 
    el resultado es parecido al que ya hemos conseguido con los <br> pero esta vez está semánticamente correcto:

    Elemento 1
    descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista
    Elemento 2
    descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista descripción de la lista

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>