Wow I have never noticed that, thanks for the heads up! Out of curiosity, would you put `role="listitem"` on `<div>` elements that wrap the `<dt>` && `<dd>` elements? It looks like `role="listitem"` is allowed on the `<dt>` element, but that doesn't feel like it would be accurate in the case where multiple `<dt>` elements are grouped together, and I'm not sure if that would mess with how the element is interpreted natively as as term.

I don’t want to check what year html5 was standardized because I think it may be north of a decade ;)

TIL The name was changed from a definition list.

It's not that inconvenient if you omit unnecessary closing tags:

    <tr>
    <td> first
    <td> second
    <tr>
    <td> what
    <td> ever

I find it simpler and cleaner than any of the markdown table markups

    <table><tr><th>Term 1<td>Definition 1
           <tr><th>Term 2<td>Definition 2
    </table>
    <dl><dt>Term 1<dd>Definition 1
        <dt>Term 2<dd>Definition 2
    </dl>

You're right, but forcing tables to cosplay as DLs was far from the worst way that tables were abused.

I always thought the DL as a single row of a table.

Yes. Any flow content is permitted inside a <dd>. See:

https://html.spec.whatwg.org/#the-dd-element

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

The wrapper div is making me a bit sad. These days, using grid layout, you don’t actually need it in most cases

When I checked in 2024 or 2025, Windows Narrator announced it differently in Chrome, Firefox, Edge (Chromium mode) and Edge (IE mode), and none of them worked how I would expect them to. Adrian Roselli's verdict (https://adrianroselli.com/2025/01/updated-brief-note-on-desc...):

> Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.

You shouldn't try to fix this kind of thing by mangling the HTML, since (1) users tend to be used to their screen reader's quirks, and (2) in situations like these, making it juuuust right in one screen reader is likely to make it incomprehensible in another. But it is important to be aware of these quirks, so you don't accidentally design an interface that relies on less-quirky behaviour.

Granted, I do not know what I am doing with CSS, but the Character Sheet example seems standard flexible elements?

Some of the extracted CSS chunks

  #statblock{
    box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
    font-family:Lato,'Trebuchet MS',sans-serif;
    font-size:85%;
    min-width:50ch;
    max-width:70ch;
    margin-inline:auto;
    background-color:#fffaf0;
    padding-inline:2rem;
    padding-block:1rem
  }
  dl.statblock-bio{
    color:maroon;
    line-height:1.5;
    border-top:5px solid maroon;
    border-bottom:5px solid maroon;
    margin-block:0.75em;
    padding-block:0.75em
  }
  dl.ability-scores{
    min-width:40ch;
    display:flex;
    justify-content:space-around;
    color:maroon
  }
  dl.ability-scores>div{
    text-align:center;
    line-height:1.5
  }
  dl.ability-scores dt{
    font-weight:700
  }

Yep, I was a little surprised about that too, seem like it is valid though https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Seems like div is the only recommended wrapper element:

https://html.spec.whatwg.org/multipage/grouping-content.html...

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

EDIT everyone replied at once lol. I'm surprised too about div.

Also, screen reader support: https://a11ysupport.io/tech/html/dl_element

Yes: https://html.spec.whatwg.org/multipage/grouping-content.html...

Custom-named elements are divs.