语义标记：结合描述列表和手风琴的详细信息/摘要标签

Question

手风琴通常用于常见问题解答部分。所以描述列表标签dl、dt 和dd 似乎是完美的标记。

对于可扩展的内容，detail 和 summary 标签似乎很合适。

不幸的是，dl 标记 must be followed 由 dt 或 dd 标记。这使得详细标签和摘要标签的组合变得不可能：

<dl class=accordion>
    <details>
        <dt>
            <summary>
                <h2>Lorem ipsum dolor sit amet</h2>
            </summary>
        </dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
    </details>
</dl>

手风琴看起来像这样，可以通过单击标题或 ✚ 图标来展开。

---

✚ Lorem ipsum dolor sit amet

---

HTML 验证器说：

在此上下文中，不允许将元素详细信息作为元素 dl 的子元素。

任何想法如何在语义上正确组合手风琴的描述列表和详细信息/摘要标签？

Answer 1

描述列表和详细信息/摘要元素不能以您描述的方式有效组合。

如果您要标记常见问题解答部分，说明列表似乎不合适。描述列表由terms 及其描述组成。问题并不是真正的“术语”。

<details> 和 <summary> 元素更适合常见问题解答，并且可以轻松地与无序列表组合。这将是更语义化的方法：

<h1><abbr title="Frequently Asked Questions">FAQs</abbr></h1>
<ul>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
</ul>