Каков семантически правильный способ создания виджета для аккордеона?

Question

с учетом семантической сети и HTML5, каков семантически правильный способ создания виджета для аккордеона?

пример:

jQueryUI предлагает следующий пример:

<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>

Теперь, если ясно, что нам нужен список с заголовком и содержимым, вот что нам нужно:

список определений?

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

Answer 1

Семантика основана на контенте .

не стиль,
не взаимодействие.

Из-за этого не будет только одного способа семантически разметить виджет аккордеона. Как виджет аккордеона это взаимодействие .

dl должны использоваться для групп значений-имен , поэтому было бы семантическим использовать dl с виджетом аккордеона, если у вас есть "термины и определения, темы и значения метаданных" , вопросы и ответы или любые другие группы данных с именами. ":

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

Если у вас есть несколько статей в архиве, это может быть семантическим для использования:

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

Прежде чем беспокоиться о том, что контент должен делать, выясните, какой у вас контент .