创建手风琴小部件的语义正确方式是什么？

Question

考虑到语义化Web和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>

- rkmax

---

我对这样的问题是否应该提交到 Stack Overflow 感到犹豫。语义化 HTML 的问题是否属于主题？ - Patrick McElhaney

除非有充分的理由证明实现会严重影响可用性或可访问性，否则代码问题应该明确存在于Stack Overflow中。 - Jimmy Breck-McKye

这个问题必须迁移到StackOverflow。 - rkmax

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>

在担心内容应该做什么之前，先弄清楚你的内容是什么。

- zzzzBov