The dl element, grouping, styling and semantics

HTML & CSS
1

I believe in the past a <dl> element could only contain direct children which are either <dt> or <dd> elements.
Then I recall a discussion in a topic here where news came that this was no longer the case and other elements could be used in these lists.
I recall thinking that this would be very helpful for grouping <dd>s with their associated <dt>s, in a visual sense rather than semantic.
The semantic grouping as I understand is defined by the order, where <dd>s belong to the <dt> they follow.

Here is the problem I look to solve.
If I re-style a <dl> to display inline like:-

Term-1: Description 1. Term-2: Description 2. Term-3: Description 3. Term-4: Description 4.

If the list wraps to a new line, a <dd> may get (visually) detached from its <dt> onto the new line.
Likewise, there have been times when I have put long lists of short values into CSS columns to make better use of page space and a more pleasing layout, avoiding excessive scrolling with acres of wasted whitespace to the right.
Again, a <dd> can get detached onto the next column.

So with the new spec (if I haven’t dreamt it) I could fix this by wrapping the associated <dt>s and <dd> together in a common parent to visually “glue” them and hold them onto the same line or column, Eg:-

<dl class="columns">
  <div>
    <dt>Term-1</dt><dd>Description 1.</dd>
  </div>
  <div>
    <dt>Term-2</dt><dd>Description 2.</dd>
  </div>
  <div>
    <dt>Term-3</dt><dd>Description 3.</dd>
  </div>
  <div>
    <dt>Term-4</dt><dd>Description 4.</dd>
  </div>
</dl>

So if that’s now valid HTML, what’s the problem?

Does this completely break the semantics of the <dl> and therefore defeat the object of using a <dl> in the first place?
It was just that reading here:-

If a dl element has one or more non-whitespace Text node children, or has child elements that are neither dt nor dd elements, all such Text nodes and elements, as well as their descendants (including any dt or dd elements), do not form part of any groups in that dl .
https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-dl-element

That’s what it appears to suggest to me. I have not been able to find much information on this subject.

3 Likes
2

I’ve not tried it, but I do see this at MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

Wrapping name-value groups in <div> elements

WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element.

I do not know how browser support for WHATWG HTML is. But the MDN example looks similar to what you’re describing.

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>
2 Likes
3

That Mozilla page also says:

Permitted content Either: Zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Or: One or more <div> elements, optionally intermixed with <script> and <template> elements.

The validator seems happy with Sam’s code. smile

2 Likes
4

It looks like your reading from the HTML 5 specs, 28 October 2014

The changes were made in the HTML 5.2 specs, 14 December 2017
https://www.w3.org/TR/html52/grouping-content.html#the-dl-element

It is in that spec that MDN quotes from (that ronpat pointed out)

The dl element represents a description list of zero or more term-description groups. Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child, and one or more descriptions (represented by dd elements possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children within a single dl element.

I believe you will be fine with the divs :slightly_smiling_face:

6 Likes
5

I didn’t check the date. It’s just what came up in search results and I assumed current spec.
I was thinking of trying this out remembering the topic here (which I have not yet found), but wanted to confirm it was valid and semantic. Then I struggled to find much good information about it.
It looks like I’m good to go with it now.

3 Likes
6

Yeah I remember it too and I couldn’t find it either.

Current Status of Specifications can always be found from that link.

Or from the breadcrumb trail shown at the top of that page.

3 Likes
7

This would have made a good quiz :slight_smile:

(Strictly just for fun)

2 Likes
8

That works well in Chrome, without the extra divs.
It actually reminded me of an other use case for the extra containers, that is using display table on DLs in a two column layout, DT on the left and DD on the right. The extra div will allow that.

I always did find DLs tricky to re-format, this will help. It took me a while to perfect the DT floated left style, though that can work without a wrapper.

In the layout I’m working on, I’m just simply making all DL children inline-block and adjusting the margins to suit, so it’s not in neat columns like this, but that’s another idea.
The lists are not really very long in the case, so they are only going to wrap on small sceens.
But there are many uses for DLs and different ways you may want to style them, so this is all good to try out.

1 Like
9

Yes the extra wrapper will make things a lot easier rather than trying to be clever. :slight_smile:

10

Oh dear, oh dear, the div element wheedles it’s
way into the confines of the dl element . :eek:

Well here’s an interesting read on that sort of
silliness…

What’s wrong with HTML5

Of course, I must admit to being “old school”, and
that I actually prefer to see lists going from north
to south rather than from west to east. :winky:

coothead

11

Only working in Chrome?

Just compared the display in Chomium and Firefox ESR, and Palemoon for an outlier.

Seems to work the same in those, so I’m curious; how does the columns display in Chrome?

12

In chrome the dt and did wrap as pairs whereas Firefox and edge split them individually.

1 Like
13

I see, though I didn’t. :slight_smile:

But the columns flows horizontally in Chrome too? :wink:

EDIT)

My Chromium is Version 69.0.3497.81 and doesn’t keep them in pair.

EDIT 2)

Just updated Chromium to Version 70.0.3538.77 and is now keeping them in pairs.
@PaulOB, Nice! :smile:

1 Like
14

I tried the codepen in Safari and it looked like it kept the pairs together then too. Until I added some text content. I think it could be made to “work” with some magic number foolishness, but of course that would be foolishness.

15

Yes you need the latest version for display:contents support.

Note the example is only for fun and not meant as a real world example.:slight_smile:

It will still work with more text but I wasn’t making columns as such just ensuring that pairs wrapped so that a dt and dd stay together.

2 Likes
16

I admit, it does feel strange to do. Though on the other hand there does seem some semantic logic in structurally grouping the sub-element groups, even if div does not seem like the right candidate to do it.

But the reality is, it is being added here for the purpose of a more readable layout and it’s not uncommon to create an extra wrapper element to simply hang a style on. It’s not something I like to do unnecessarily, but when needs must…

For the most part, a vertical list works well, but this is a versatile element that can be used in many contexts. In this particular layout I am working on the horizontal list fits the bill nicely, where the conventional vertical list would seem awkward. (It looks better than in the examples below)

I have drawn up a few examples of different ways to display DLs with different methods, some with and some without the extra wrappers to show where it may be useful.
Can anyone think of any other useful or creative ways to display the lists? Or improve on the methods shown? Maybe someone is clever enough to achieve these displays without the extra wrapper divs.

One to look out for is the columns layout. My fix for that is very fragile and isn’t really a fix at all. I thought there was a way to stop group elements wrapping to new columns, but I don’t remember how.

This seem to be becoming a challenge, if you have not noticed. Do your worst.

This seemed very easy this time around. But maybe it was the context of the (real live) page in my previous experience. I think there was a lot of problems with float snagging and clearance being needed here and there, I don’t recall exactly why it was hard to do.

3 Likes
17

I would have preferred if they’d created a new tag for this rather than using a div. We have also to remember also that there can be multiple DDs for one DT (or vice versa) and therefore a new wrapper actually makes semantic sense.

Actually, I suppose we could just have used multiple dl elements anyway; its no extra code. However you would still have needed to group them all with a section or div in order to keep them all together…

Yes it would have been harder years ago.

Here are 2 that I did about 15 years ago (eek) and have hacks for IE5 :slight_smile:

http://www.pmob.co.uk/temp/dl-list2.htm
http://www.pmob.co.uk/temp/dl-list4.htm

If you set the div to display:inline-block and width 100% instead of display:table it will not wrap partially to a new column. break-inside: avoid-column; is the standards way to do it but doesn’t work everywhere.

3 Likes
18

@PaulOB, the pairs seems not stable though, if I zoom the page the pairs will break, just like in Firefox.

A refresh is needed to again keep the pairs in different widths.

1 Like
19

Probably a redraw bug with display:contents. It was never meant as a foolproof demo but just something I wondered if was possible :wink:

1 Like
20

I tried both these and just got a single column.

Edit Oops, it was a typo in my code, it does work. The standards version works where it’s said to work (not Firefox).

2 Likes