【问题标题】:Is an unordered list element allowed inside a description details element?描述详细信息元素中是否允许使用无序列表元素?
【发布时间】:2020-03-26 21:29:23
【问题描述】:

dd 元素可以包含ul 元素吗?像这样:

<dl>
  <dt>Lorem</dt>
  <dd>Sed lectus</dd>
  <dt>Vestibulum</dt>
  <dd>
    <ul>
      <li>viverra nec</li>
      <li>blandit vel</li>
      <li>egestas et</li>
    </ul>
  </dd>
  <dt>Suspendisse</dt>
  <dd>Nulla quam</dd>
</dl>

【问题讨论】:

    标签: html semantic-markup


    【解决方案1】:

    是的,&lt;dd&gt; 包含&lt;ul&gt; 是有效的。根据HTML Spec&lt;dd&gt; 元素应该包含flow content。无序列表被视为流内容。

    但是,如果您的示例中的每个项目都是后续 &lt;dt&gt; 术语的替代描述,则它们不应在无序列表中进行标记,而应使用系列进行标记&lt;dd&gt; 个元素。

    例如,以下是有效的 HTML,但 语义不正确——因为它暗示整个列表是对该术语的单一描述。

    <dl>
      <dt>Firefox</dt>
      <dd>
        <ul>
          <li>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</li>
          <li>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</li>
        </ul>
      </dd>
    </dl>
    

    标记此内容的有效语义正确方法是:

    <dl>
      <dt>Firefox</dt>
      <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
      <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd>
    </dl>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-06-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-12
      • 2018-07-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多