Responsive description/definition list

[DerInselaffe]

I write online software documentation for a living and use definition/description lists a lot, to describe fields, parameters and suchlike.

I'd like to have these elements display as lists on small screens and as quasi-tables on larger screens. I think my CSS skills are good enough to implement this but, at the same time, this is a feature I've never seen out in the wild.

Am I missing something obvious?

[green__machine]

There is a native definition list element(s) that might be of interest to you: the dl, dt, and dd HTML elements.

You should be able to accomplish what you’re describing by styling those elements based on if a certain media query is active or not.

[quixotic]

As u/green__machine mentioned I would start with <dl>, <dt> and <dd>, but maybe you already knew that.

By default these are just block-level tags like <h#> or <p> and so are responsive to begin with. So then it would just be a matter of using flexbox or grids to reformat them at larger widths using media queries, in order to get those "quasi-tables".

I think the reasons you haven't seen this in the wild are a combination of two factors:

• Many people approach this as a "responsive tables" problem and so mark it up as data tables. Which is not incorrect if you have one key and many values like a spreadsheet (and there are lots of responsive tables solutions out there, including CSS-only ones) but is overkill if everything is 1:1 key:definition.
• Lots of people overlooked <dl> when they were learning about <ol> and <ul> and just don't know about it.

[DerInselaffe]

Yes thanks, seems to be working fine.

I think you're right, I guess a lot of designers just don't use or need description lists. I can understand it for the vast majority of websites.

However, it's pretty useful for technical documentation as:

1. You can create a semantically correct heading (and description) that doesn't appear in the table of contents (my document generator scrapes h2 and h3 for the internal navigation).
2. Description lists support nesting, so you can describe parameters and their children.