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:-
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:-
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.
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 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.
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.
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.
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.
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
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.