Foros Programación Cliente

Lista desordenada dentro de una lista de definición

2 2 Respuestas Domingo 17 de abril, 2011
Buenas,

estoy dando formato a un texto que contiene enunciados y respuestas, algunos de estos enunciados contienen dos opciones que hay que argumentar.

He decidido utilizar una lista de definición para organizarlo, los términos son los enunciados y las definiciones las respuestas. Las opciones van dentro de listas desordenadas. El problema es que forman parte del enunciado, pero el elemento <dt> no acepta elementos de bloque. Cerrando los <dt> antes de las opciones, e incluyendo estas dentro de elementos <dd>, se consigue el efecto.

Por ejemplo:

<dt>Primera parte del enunciado. Razona las siguientes opciones:</dt>
<dd><ul>
<li>Opción A</li>
<li>Opción B</li>
</ul></dd>
<dt>Segunda parte del enunciado.</dt>
<dd>Respuesta al enunciado</dd>

El aspecto se iguala con CSS, pero la semántica no me convence nada. ¿Cuál seria la forma correcta de hacerlo?

Muchas gracias.
Registrado desde 17/04/11
Número de posts: 2
  • Avatar de JCMartinez JCMartinez Registrado desde 26/10/10 / Número de posts: 117
    No he usado nunca las listas de definición, pero según el wiki de w3c esta es la forma de ejemplo:

    <dl>
    <dt>tarm1</dt>
    <dd>difinition1</dd>
    <dt>tarm2</dt>
    <dd>difinition2</dd>
    </dl>

    Creo que no necesitas utilizar ningún elemento <ul> ni <li>. Pudes hacerlo así y creo que obtienes el mismo efecto. Pero como ya te he dicho nunca lo he utilizado y no se cuál es la sintaxis correcta.

    <dl>
    <dt>Primera parte del enunciado. Razona las siguientes opciones:</dt>
    <dd>Opción A</dd>
    <dd>Opción B</dd>
    <dt>Segunda parte del enunciado</dt>
    <dd>Respuesta A</dd>
    <dd>Respuesta B</dd>
    </dl>
    jcmartinezweb.com
    Twitter
    Publicado hace cerca de un año
  • Avatar de Mystral Mystral Registrado desde 28/05/03 / Número de posts: 1454
    Como bien apunta JCMartinez, la forma de hacerlo semánticamente es esa, <dl> es la etiqueta que determina una "lista de definición (definition list)", la etiqueta <dt>, hace referencia al término que se va a definir (definition term) y dd a la definición del término (definition).
    Con las css le das el aspecto que quieras. Básicamente es la estructura a utilizar para que los lectores de pantalla y demás identifiquen correctamente la clase de información que insertas en las etiquetas y le den el tratamiento adecuado. Muy importante para el tema accesibilidad.
    Salu2
    Publicado hace cerca de un año