如何为多个<dl>定义列表添加统一标题？

嘿，这个问题问得很到位！首先得明确：不能用单个<dt>来给多个<dl>做统一标题——因为<dt>是单个定义列表（<dl>）内部的“术语/名称”项，它的语义只能绑定到所属的那个<dl>，跨多个<dl>使用完全不符合HTML规范，还会搞乱语义和可访问性。

下面给你几种语义化的正确方案，按需选择：

方案1：用标题元素（最推荐） #

直接用<h2>/<h3>等标题标签来标识整个组的主题，这是最符合HTML语义、也是屏幕阅读器和搜索引擎最友好的做法：

<h2>Items in fridge</h2>
<dl>
  <dt>Food:</dt>
  <dd>Eggs</dd>
  <dd>Bacon</dd>
</dl>
<dl>
  <dt>Drinks:</dt>
  <dd>Water</dd>
  <dd>Juice</dd>
</dl>

标题元素本身就是用来划分页面内容区块、标注主题的，完美适配你的需求。

方案2：用<figure>+<figcaption>包装 #

如果这组定义列表更偏向一个“独立的内容单元”（比如类似图例、说明块），可以用<figure>把它们包起来，再用<figcaption>做标题：

<figure>
  <figcaption>Items in fridge</figcaption>
  <dl>
    <dt>Food:</dt>
    <dd>Eggs</dd>
    <dd>Bacon</dd>
  </dl>
  <dl>
    <dt>Drinks:</dt>
    <dd>Water</dd>
    <dd>Juice</dd>
  </dl>
</figure>

<figcaption>专门用来给<figure>里的内容提供标题/说明，语义上非常精准。

方案3：用<section>组织章节 #

如果这个冰箱物品列表是页面的一个独立章节，可以用<section>把内容包裹起来，再搭配标题：

<section>
  <h2>Items in fridge</h2>
  <dl>
    <dt>Food:</dt>
    <dd>Eggs</dd>
    <dd>Bacon</dd>
  </dl>
  <dl>
    <dt>Drinks:</dt>
    <dd>Water</dd>
    <dd>Juice</dd>
  </dl>
</section>

<section>会把内部内容标记为一个完整的主题章节，让页面结构更清晰。

总结一下：别想着用<dt>跨列表当标题，选上面任意一种语义化方案都能完美解决你的问题～

内容的提问来源于stack exchange，提问作者panthro