语义标记：结合描述列表和 Details/Summary 手风琴标签

Question

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

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

不幸的是，dl 标签被 dt 或 dd 标签 must be followed。这使得无法结合详细信息和摘要标签：

<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 验证器说：

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

关于如何在语义上更正手风琴的描述列表和 details/summary 标签的任何想法？

Answer 1

描述列表和 details/summary 元素无法按照您描述的方式有效组合。

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

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

语义标记：结合描述列表和 Details/Summary 手风琴标签

Semantic Markup: Combining Description List and Details/Summary Tag for Accordion

html

accordion

semantic-markup