向多个定义列表添加标题？答案

【问题标题】：Adding a title to more than one definition list?向多个定义列表添加标题？
【发布时间】：2018-10-22 22:49:40
【问题描述】：

我希望有多个定义列表并为这些列表设置一个标题，例如：

 //how can I add the title of "Items in fridge"
 <dl>
   <dt>Food:</dt>
   <dd>Eggs</dd>
   <dd>Bacon</dd>
 </dl>
 <dl>
   <dt>Drinks:</dt>
   <dd>Water</dd>
   <dd>Juice</dd>
 </dl>

将整体<dt> 添加到各种定义列表的正确方法是什么

【问题讨论】：

标签： html semantics

【解决方案1】：

不是 100% 确定我正确理解了这个问题，但也许可以将它们放在 <section> 中？

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

（注意：我最初的帖子中有另一个解决方案，但正如 Alohci 在 cmets 中指出的那样，它不是有效的 HTML）

【讨论】：

根据 WHATWG，我认为第二个示例无效，content model of a <dl> 是 <dt> 和 <dd> 元素，或 <div> 元素，不是两者的混合。
其实。这也无效。 <div> 的内容模型是：“如果元素是 dl 元素的子元素：一个或多个 dt 元素后跟 一个或多个 dd 元素，可选择与脚本支持元素混合。 ."，因此 <dt> 本身不符合要求。
哎呀，那我没主意了