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

【问题标题】：what is the semantically correct way to create an accordion widget?创建手风琴小部件的语义正确方法是什么？
【发布时间】：2011-11-24 18:59:52
【问题描述】：

考虑到语义网络和 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>

【问题讨论】：

我很纠结这样的问题是否应该交给 SO。 Are questions about semantic HTML on topic?
除非有充分的理由表明实现会显着影响可用性或可访问性，否则代码问题应该牢牢地留在 Stack Overflow
这个问题必须迁移到 StackOverflow

标签： html semantics

【解决方案1】：

语义基于内容。

不是风格，
不是互动。

因此，不会只有一种方法可以在语义上标记手风琴小部件。作为手风琴小部件是一个交互。

dl's 应该用于name-value groups，因此如果您有“术语和定义、元数据主题和值、问题和答案或任何其他组名-值数据。":

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

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

【讨论】：