¿cuál es la forma semánticamente correcta para crear un widget de acordeón?

Question

teniendo en cuenta la web semántica y HTML5, ¿cuál es la forma semánticamente correcta para crear un widget de acordeón?

ejemplo:

jQueryUI propone el siguiente ejemplo:

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

ahora si está claro que necesitamos una lista que tiene un título y contenido, ahora que es lo que tendríamos entonces:

¿una lista de definiciones?

<dl> 
    <dt> 
     Title 
    </dt> 
    <dd> 
     Content 
    </dd> 
</dl> 

Answer 1

Semántica se basan en el contenido de.

no el estilo,
no la interacción.

Debido a esto, no va a haber una sola forma de marcar semánticamente un widget de acordeón. Como un widget de acordeón es una interacción .

dl 's se debe utilizar para name-value groups, por lo que sería semántica utilizar una lista de lesionados con un widget de acordeón si tienes "términos y definiciones, temas de metadatos y los valores, las preguntas y respuestas, o cualquier otro grupo de datos de nombre-valor ":.

<dl id="definitions"> 
    <dt>...</dt> 
    <dd>...</dd> 
    <dt>...</dt> 
    <dd>...</dd> 
    ... 
</dl> 

Si usted tiene un montón de artículos en un archivo, que podría ser semántica de usar:

<h1>Archive</h1> 
<div id="articles"> 
    <h2>...</h2> 
    <article>...</article> 
    <h2>...</h2> 
    <article>...</article> 
    ... 
</div> 

Antes de preocuparse por lo que el contenido debe hacer, averiguar cuál es tu contenido es.