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坐在amet

HTML验证程序说：

在这种情况下，不允许将元素详细信息作为元素dl的子元素。

有什么想法可以在语义上纠正手风琴的描述列表和详细信息/摘要标记的组合吗？

Answer 1

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

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

<details>和<summary>元素更适用于FAQ，并且可以轻松地与无序列表组合。这将是更具语义的方法：

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

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

1 个答案: