¿Hay una forma válida de ajustar un dt y un dd con un elemento HTML?

Ojalá HTML pudiera hacer algo semánticamente equivalente a esto;¿Hay una forma válida de ajustar un dt y un dd con un elemento HTML?

<dl class="main-list"> 
    <definitionitem> 
     <dt>Some Thing</dt> 
      <dd>You know it!</dd> 
     <dt>Another Thing</dt> 
      <dd>Word.</dd> 
    </definitionitem> 
    <definitionitem> 
     <dt>Stuff</dt> 
      <dd>Alright!</dd> 
    </definitionitem> 
</dl>

Sin embargo, como lo más cercano que he llegado es algo que no estoy 100% satisfecho con la semántica de;

<div class="redundant-wrapper"> 
    <dl class="main-list"> 
     <dt>Some Thing</dt> 
      <dd>You know it!</dd> 
     <dt>Another Thing</dt> 
      <dd>Word.</dd> 
    </dl> 
    <dl class="another-main-list"> 
     <dt>Stuff!</dt> 
      <dd>Alright!</dd> 
    </dl> 
</div>

Me preguntaba si alguien tiene alguna otra idea de cómo podría hacer esto?

Además, el motivo por el que se agrupan los elementos es porque se agrupan visualmente en el contenido que se marca. Imagine una página de diccionario, con una sola lista de definición, donde cada definición se encuentra en un recuadro que se flota a la izquierda. Me encuentro con esta situación todo el tiempo.

Fuente

2012-06-04 Jo Sprague

No hay ninguna 'sintácticamente válida', o incluso 'válida en absoluto' manera de envolver un 'dt' y' dd'; los * únicos hijos válidos * de un 'dl' son' dt' y 'dd'. –

Entiendo que no es válido. Lo que me pregunto es, ¿cómo las personas agrupan semánticamente un solo par dt/dd como un "elemento de definición", ya que, semánticamente, se podría argumentar que una definición es un niño semántico de una "lista de definición", sí mismo tener hijos de dt/dd. –

@JosiahSprague - Ponga el elemento '

' después del elemento '

' y antes de cualquier otro elemento '

'. – Quentin

No, Ian Hickson (editor de especificación HTML) es convinced que este es un problema de CSS, HTML no un uno:

Esto no debería ser necesario. Es una limitación de CSS.

La solución correcta es que CSS proporcione algún pseudo-elemento u otro mecanismo que introduce un contenedor anónimo en el árbol de representación que envuelve los elementos que desea envolver.

Al mismo tiempo, fantasai (CSS editor de especificaciones) está convencido de contrary:

No creo que este es un problema de CSS. Creo que es un problema de HTML. Los pseudo-elementos no son triviales, y una cosa no trivial que implementar, y una cosa comparativamente confusa de usar.

Sin embargo, Ian aparentemente ignora eso y continúa estando alejado de la realidad.

Hay mismos problemas con LEGEND (que debe ser primer hijo directo del FIELDSET según la especificación HTML), FIGCAPTION (que debe ser el primero/último hijo directo del FIGURE), y LI (hijo directo de UL/OL).

En cuanto a DT/DD en particular, yo personalmente utilizar UL lista con DL dentro de cada uno de LI:

<ul> 
    <li><dl> 
     <dt>Lorem</dt> 
     <dd>Lorem definition</dd> 
    </dl></li> 

    <li><dl> 
     <dt>Ipsum</dt> 
     <dd>Ipsum definition</dd> 
    </dl></li> 
</ul>

Así que tenemos DL para hacer relación entre DT y DD y UL lista para que se den pertenece a una lista

Update (14/11/2016): El estándar HTML (WHATWG version por ahora) ahora (desde 31.10.2016) allows el elemento DIV (opcionalmente mezclados con los llamados elementos de script de soporte SCRIPT, TEMPLATE) para ser hijos directos de DL elementos.W3C's HTML validator hace no cuenta para este cambio todavía, pero el HTML5.org validator experimental lo hace.

Actualización (18/01/2017): Resulta que la especificación no not permite más de una anidada DIV envoltura para DT/DD, por lo que la utilidad de la función en la práctica es en realidad muy limitado y el UL → → LIDL enfoque descrito aquí sigue siendo relevante.

Fuente

2012-06-12 13:48:51

Me encanta esta idea. No es semánticamente perfecto, pero como dijiste, la especificación realmente no permite eso. Esta es la idea más semántica que he escuchado hasta ahora. ¡Gracias por tus pensamientos! –

La especificación de HTML ahora ha cambiado y permite 'div' en' dl'. https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element – zcorpan

@zcorpan Wow, gracias, Simon. Esa es una especie de cambio de paradigma en el mundo HTML. Es una lástima que el cambio sea muy limitado y se limite a agrupar elementos 'DT' /' DD', mientras que los contenedores genéricos aún _no están_ permitidos _everywhere_ - p. Ej. para envolver 'LEGEND' y' FIGCAPTION'. Preferiría que esto se resolviera por CSS, ya que eso permitiría tener diferentes conjuntos de elementos agrupados, por ejemplo, en consultas de medios, pero tener esto al menos en HTML y al menos para 'DT' /' DD' es de todos modos mejor que nada. –

¿Hay una forma válida de ajustar un dt y un dd con un elemento HTML?

Respuesta

Cuestiones relacionadas