html - 语义标记 : Combining Description List and Details/Summary Tag for Accordion

Question

Accordion 通常用于常见问题解答部分。所以描述列表标签dl , dt和 dd似乎是完美的标记。
对于可扩展的内容 detail和 summary标签似乎很合适。
不幸的是，dl标签 must be followed来自 dt或 dd标签。这使得与 detail 和 summary 标签的组合不可能:

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

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

✚ Lorem ipsum dolor 坐 amet

HTML 验证器说:

Element details not allowed as child of element dl in this context.

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

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>