0

I wish to have multiple definition lists and have a single title for these lists, for example:

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

What's the correct way to add an overall <dt> to various definition lists

panthro
  • 22,779
  • 66
  • 183
  • 324

1 Answers1

2

Not 100% sure I understand the question correctly, but maybe put them in a <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>

(note: there was another solution in my post originally but, as Alohci pointed out in the comments, it wasn't valid HTML)

Máté Safranka
  • 4,081
  • 1
  • 10
  • 22
  • 2
    I don't think that the second example is valid according to WHATWG, The [content model of a `
    `](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element:concept-element-content-model) is `
    ` and `
    ` elements, **or** `
    ` elements, not a mixture of both.
     – Alohci May 12 '18 at 22:47
  • Actually. that's not valid either. The content model of `
    ` is: "If the element is a child of a dl element: one or more dt elements followed by **one or more** dd elements, optionally intermixed with script-supporting elements...", so a `
    ` on its own doesn't conform.
     – Alohci May 12 '18 at 23:37
  • Welp, I'm out of ideas then – Máté Safranka May 12 '18 at 23:41