what is the semantically correct way to create an accordion widget?

Question

taking into account the semantic web and HTML5, what is the semantically correct way to create an accordion widget?

example:

jQueryUI proposes the following example:

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

now if it is clear that we need a list that has a title and content, now that is what we would need then:

a list of definitions?

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

Answer 1

Semantics are based on the content.

not the style,
not the interaction.

Because of this, there isn't going to be just one way to markup an accordion widget semantically. As an accordion widget is an interaction.

dl's should be used for name-value groups, so it would be semantic to use a dl with an accordion widget if you've got "terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.":

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

If you've got a bunch of articles in an archive, it could be semantic to use:

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

Before worrying about what the content should do, figure out what your content is.