9 ms·
On The <dl> (2021)
- deleted 4mo ago[deleted]
- gabriela_c 4mo agoI loved the character sheet example! Fun!
- turtleyacht 4mo agoHoped to see CSS for the alternative, where <div> is not nested inside the <dl>. Too used to thinking of div as "layout containers."
- WorldMaker 4mo agoCSS Grid is a very good friend when trying to style DL without extra DIV wrappers. An example: dl { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto; } dt { grid-column-start: 1; } dd { grid-column-start: 2; } That very simply puts terms side-by-side data in a nice obvious way. (Even with multiple DDs per DT.) A bit like the Wikipedia screenshot in the article but that's more balanced `grid-template-columns: 1fr 1fr;`. (But that's the flexibility of CSS Grid, right? Real easy to tweak this further for your needs/interests/design.)
- Telemakhos 4mo agoI was a bit surprised to see nested <div>s given as some sort of precursor pattern, when <dl> was part of HTML before 2.0 back in the days of table layout.
- xigoi 4mo agoIt’s probably aimed at React developers, many of which are probably not even aware that elements other than <div> exist.
- deleted 4mo ago[deleted]
- rickstanley 4mo agoI've used this a good amount of times, when I coded in front end projects. The first time gave me that satisfying feeling of using the right tool for the job, like completing a puzzle of HTML semantics. I remember JAWS not announcing it correctly in 2018, not sure if it's better now.
- wizzwizz4 4mo agoWhen 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-description-list-support.html 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.
- phyzix5761 4mo agoI'm curious if the spec actually says you can only wrap it with a div because I like to do semantic html and name my elements specific to my domain.
- philo23 4mo agoYep, I was a little surprised about that too, seem like it is valid though https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt#technical_summary https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- Tomte 4mo agoYes: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html...
- deleted 4mo ago[deleted]
- wonger_ 4mo agoSeems like div is the only recommended wrapper element: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html... https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl#technical_summary 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 https://a11ysupport.io/tech/html/dl_element
- moron4hire 4mo agoCustom-named elements are divs.
- jazzypants 4mo agoExactly! It cracks me up when people name-check "semantic elements" when it doesn't actually mean anything in that context. Accessibility software doesn't understand the semantics of your custom elements, so there is no benefit in that situation whatsoever. Maybe it's easier for you to read and edit in the future, but that's it. Somehow, people got convinced that <div> elements are evil and should never be used no matter what. Yes, you should use a more semantic element when it makes sense, but try to remember what that phrase actually means.
- captn3m0 4mo ago> Prior to HTML5, this was called a definition list. This is because the <dl> was originally only intended to represent glossaries of terms and their definitions. TIL I’ve been naming it wrong for a decade.
- xp84 4mo agoI don’t want to check what year html5 was standardized because I think it may be north of a decade ;)
- zbentley 4mo ago> I think it may be north of a decade Nearly two!
- stouset 4mo agoI was better off not knowing that this morning. Might be worth prefixing that tidbit of info with “trigger warning: the unrelenting passage of time”.
- HappMacDonald 4mo agoThere exist toddlers who were raised on Teletubbies that are now members of Congress
- stouset 4mo agoI’m going to have to politely request that you stop this immediately.
- jasonlotito 4mo agoTIL The name was changed from a definition list.
- Tepix 4mo ago
- MattRix 4mo agoGood title
- cloud-oak 4mo agoThe final example of the DnD statt sheet makes me think whether it's legal to nest <dl>s? I.e. can we do <dl> <dt>Actions</dt> <dd><dl>...</dl></dd> </dl>
- perilunar 4mo agoYes. Any flow content is permitted inside a <dd>. See: https://html.spec.whatwg.org/#the-dd-element https://html.spec.whatwg.org/#the-dd-element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- moron4hire 4mo agoI do it to render nested JSON objects, for example.
- myfonj 4mo agoPlus, when curious about formal syntactic correctness, there is the validator.w3.org [1]. [1] https://validator.w3.org/nu/?showsource=yes&showoutline=yes&doc=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%253C%21doctype%2520html%253E%253Chtml%2520lang%253D%2522en%2522%253E%253Ctitle%253E.%253C%252Ftitle%253E%250A%253Cstyle%253Edl%2520%257B%2520border%253A%2520outset%253B%2520padding%253A%25201ch%253B%2520%257D%250A%2520%2520%2520%2520%2520%2520%2520dl%252C%2520dd%2520%257B%2520margin-block%253A%25201lh%253B%2520%257D%250A%2520%2520%2520%2520%2520%2520%2520dt%2520%257B%2520font-weight%253A%2520800%253B%2520letter-spacing%253A%2520.2ch%2520%257D%250A%253C%252Fstyle%253E%250A%253Cdl%253E%253Cdt%253ERoot%2520term%250A%2520%2520%2520%2520%253Cdd%253ERoot%2520definition%252C%2520with%2520%253Cdl%253E%253Cdt%253EChild%2520term%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdd%253EChild%2520Definition%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdl%253E%250A%253C%252Fdl%253E https://validator.w3.org/nu/?showsource=yes&showoutline=yes&...
- jdw64 4mo agoblog looks beautiful. I really wish I had this kind of talent for frontend.
- michalc 4mo agoThe GOV.UK Design System summary list component is a description list https://design-system.service.gov.uk/components/summary-list/ https://design-system.service.gov.uk/components/summary-list... And... it also uses the wrapper div for styling
- 9dev 4mo agoThe wrapper div is making me a bit sad. These days, using grid layout, you don’t actually need it in most cases
- Theodores 4mo agoAbsolutely! I put dl lists in a grid with no divs needed. As MDN says, div is the last resort, invariably there is something better, and nowadays that is grid styling. New to me is multiple dd's. For legacy layouts littered with divs and classes, display: contents helps get rid of the div wrappers, promoting whatever is wrapped. Even with disclosure elements there are ways to avoid div wrappers using the pseudo element for everything enclosed by the details element apart from the summary element.
- petepete 4mo agoThe problem with 'in most cases' when it comes to a design system that's used in hundreds of different ways across departments and services, is that some week break. I don't really like the div either (I use the design system all day, and maintain a set of components), but it makes documentation much easier.
- gbeardish 4mo agoWhat about multiple '<dt>' for one or more '<dd>'?
- simonw 4mo agoHere's a useful note on how well screen readers support DL: https://adrianroselli.com/2025/01/updated-brief-note-on-description-list-support.html https://adrianroselli.com/2025/01/updated-brief-note-on-desc...
- Demiurge 4mo agoI love DL. I think tables, at least in the past, were misused as DLs even more in the past and the inconvenience of the table markup is even worse than a bunch of divs.
- bdcravens 4mo agoYou're right, but forcing tables to cosplay as DLs was far from the worst way that tables were abused.
- sodapopcan 4mo agoAt least <td>s could easily centre things vertically ;)
- enriquto 4mo agoIt'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
- debesyla 4mo agoIsn't markdown table just a bunch of | ?
- zufallsheld 4mo agoThat's the problem.
- froh 4mo agomost specifically the problem is that markdown tables don't allow breaking the table row in multiple lines but then you can always use HTML tables in markdown and Pandoc transforms it just fine
- 4mo ago
- mockbuild 4mo agoit's on archive html5 .flac 16-bit 44.1kHz no <dl> flag.
- tln 4mo ago> Admittedly, however, support for the <dl> element is not yet universal. Wait what? <DL> has been in HTML since.. the first draft in 1993! I like DL's but they can be challenging to style. This article is using a lot of fixed pixel widths which would break on really small screens or larger data.
- deleted 4mo ago[deleted]
- 3eb7988a1663 4mo agoGranted, 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 }
- WorldMaker 4mo agoI've found CSS Grid is extremely useful for styling DLs.
- extra88 4mo agoWell, it took about a decade for web standards to become a real thing and a lot longer for Web Platform Tests to come to be. Still, while there are lots of tests for DOM construction and visual rendering, testing construction of the accessibility tree is lacking (also keyboard interaction testing). And that's just for browsers, there's no shared spec for the operating system accessibility APIs the browsers' accessibility tree has to be translated into or how screen readers (and other assistive technologies) will use the OS's APIs.
- smitty1e 4mo agoThis seems a clear enough win for things that would fit into a simple python dictionary. Why is it preferred over <table> for laying out columns via a the character attributes at the bottom of TFA?
- jimbosis 4mo agoThe world's first website makes heavy use of <dl>s. https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ https://info.cern.ch/ (A landing page of sorts to give context and orientation about the actual first website.)
- AlienRobot 4mo agoGood website. It's responsive.
- chrismorgan 4mo ago> <dl aria-label="Ability Scores"> This is incorrect: 1. <dl> has no corresponding (viz. implicit) role, but can be given the role group, list, none or presentation <https://w3c.github.io/html-aria/#el-dl https://w3c.github.io/html-aria/#el-dl>. 2. You’re only allowed to define aria-label on elements that have a compatible role, implicit or explicit <https://w3c.github.io/html-aria/#docconformance-naming https://w3c.github.io/html-aria/#docconformance-naming>. 3. aria-label is allowed on all but a handful of roles <https://www.w3.org/TR/wai-aria-1.2/#aria-label https://www.w3.org/TR/wai-aria-1.2/#aria-label>, which in this case knocks out presentation and none, leaving group and list. 4. group doesn’t feel right, list feels acceptable. In summary: either ditch the aria-label, or add role="list" (meaning also role="listitem" on children). —⁂— One thing the article misses is that you can have multiple <dt> in a row too, not just <dd>. The spec has a good example: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element:the-dl-element-5 https://html.spec.whatwg.org/multipage/grouping-content.html... They’re not name–value pairs, they’re name–value groups.
- redmatter 4mo agoWow 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.
- chrismorgan 4mo agoI know the fundamentals of this sort of thing, but I haven’t done much practical with it, so I don’t feel that I can comment on this point.
- pverheggen 4mo agoI pulled up some of those spec's examples in Chrome and viewed the accessibility tree, and weirdly it assigns <dt> an implicit role of `term`, even though the spec says that <dt> should be `listitem` and <dfn> should be `term`. I didn't check FF or Safari but I would not be surprised if they did something different. Given the spotty screen reader support for dt/dd to begin with, I'd steer clear of using multiple `<dt>` s if a11y is top priority, and just modify your content to have one dt per dd. Your single dt text could be "X or Y", repeat the definition twice, etc. If you're familiar with Jakob's Law, it applies to a11y too, so stick with what users might have seen on other sites.
- shermantanktop 4mo agoThe <dl> tag seems to cover a subset of a broad semantic space, but doesn’t easily extend beyond adding another <dd>. I dunno, I guess I’m a caveman. If it looks right and works (including accessibility) then I figure I’m pursuing something that doesn’t matter a lot.
- callc 4mo agoShameless plug: you might be interested in https://calvinlc.com/p/2026/02/11/everything-is-a-div.html https://calvinlc.com/p/2026/02/11/everything-is-a-div.html I need to learn more about web accessibility, but if you completely ignore it (and other sane practices) HTML looks really simple. I think the design of HTML is just too much. There’s so many tags that don’t do much. It’s like w3c decided that any common thing people use in websites needs a tag. The end result is more and more tags… Can anyone convince me otherwise? It screams design red-flags to me. PS: I love the web and think it’s the best platform and future platform we have at the moment. It’s just quirky and loves not breaking old websites!
- shermantanktop 4mo agoOh that’s great. It’s an opinionated view that focused strictly on the behavior of the tags wrt layout and appearance. I’ve noticed that discussions of semantic meaning of tags often contain the word “feel.” Nothing wrong with that, taste matters, but it does point to the non-functional goals that are being pursued when people disagree. <ol> vs <ul> - they are both ordered, because markup is ordered. One gets decorated differently than the other by default. Is the difference semantic or typographical?
- bulatb 4mo agoA <ul> is a list of things whose order makes no difference to its meaning. Rearranging a <ul> would change the presentation, not the information. Rearranging an <ol> would change both. <ul> Players <li> Alice <li> Bob <li> Carol </ul> <ol> Leaderboard <li> Bob <li> Alice <li> Carol </ol>
- Finnucane 4mo agoWe've always used this in our ebooks for abbreviation and glossary lists. The problem I've always had is that you need to use a bit of css to make two lined-up columns. I've done it with floats. Now, some ebook readers will support grid and flex-box, which give better results, but the Kindle still does not. Kindle is sort of the IE6 of the ebook world.
- kqp 4mo agoThis is going to be unpopular here, but life became easier when I quit trying to write semantic HTML. It’s just poorly designed, I’m sorry. Every time I’ve reached for a <dl> I’ve eventually regretted it because I wanted multiple levels of wrappers, or a divider between sections, or an icon, or a heading spanning multiple key-value pairs, etc. They make this stuff with some flexibility but nowhere near enough to actually cover the generalized concept it purports to. I still use the corresponding elements when there are observable benefits, of course, like <button>, <h1>, etc, but when all it’s going to do is not quite fit the data model and force me to override everything, it’s just not a practical choice. It shouldn’t be so controversial to say that if 99% of usage routes around your API, it’s probably the API’s fault.
- halapro 4mo agoSounds like it's CSS' fault then. I think that just like they introduced `display:contents` to remove wrappers, they should also introduce a way to group elements as if they had a common ancestor. :wrap(dt, dt+dd) {border: solid 1px}
- eurleif 4mo agoProposal from 2016 (closed): https://github.com/w3c/csswg-drafts/issues/588 https://github.com/w3c/csswg-drafts/issues/588
- rezonant 4mo agoSeems the original ::contents proposal is where it's at now, though there hasn't been action on it for some time. Not sure if they hit a snag or it's just on the back burner https://github.com/w3c/csswg-drafts/issues/2406 https://github.com/w3c/csswg-drafts/issues/2406 This proposal has the benefit of not violating the tree structure should multiple :wrap rules apply to overlapping elements.
- cubefox 4mo agoGood idea. Together with ::after / ::before and content: (which can insert text into the website) it might then be possible to create a website without any HTML, only CSS.
- lechimp 4mo agoIt always bugs me that the naming of the element does not seem to really fit examples like „Author: Tolkien“. It‘s not that _Tolkien“_ „defines“ the „term“ _Author_ right? The elements are still used for key-value-lists and no one seems to notice or comment on this issue. Am I the only one?
- WorldMaker 4mo agoAs the article points out, HTML5 softened the name from "definition list" to "description list" to move it a bit away from thinking of it as a "dictionary" definition and somewhat better reflect how it has always been used.
- myfonj 4mo ago[dead]
- alanbotts 4mo ago[dead]
- gste 4mo agoI've been following roadmap.sh, and while it's not a comprehensive learning resource, it does help close obvious knowledge gaps. As it happens I was just reading about this. https://roadmap.sh/html https://roadmap.sh/html (see "Definition lists")
- theodpHN 4mo agoList history (listory?) lesson, kids: As the link below to a 1985 IBM mainframe DCF/GML manual shows, DL-DT-DD have been a thing since before the web. In addition to Definition lists (DL), the 40+ year-old documentation describes Glossary lists (GL), Ordered lists (OL), Unordered lists (UL), and Simple lists (SL). ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85 https://archive.org/details/bitsavers_ibm370DCFSpositionFacilityGeneralizedMarkupLanguag_15844220/page/97/mode/2up https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...
- JohnKemeny 4mo agoIsn't it description list?
- hoppyhoppy2 4mo agoFWIW, the Wikipedia page on "HTML elements" says: >A description list (a.k.a. association list or definition list)[...] The "Definition list" Wikipedia article is a redirect to that paragraph. https://en.wikipedia.org/wiki/HTML_element#dl https://en.wikipedia.org/wiki/HTML_element#dl
- skgough 4mo agoI believe IBM Generalized Markup Language evolved into SGML (Standard Generalized Markup Language) which was used heavily at CERN when Tim Berners-Lee was working on HTML, which is heavily derived from it. I find this interesting about HTML: some form of the markup language had been floating around for decades until Berners-Lee added hyperlinks to it.
- epc 4mo agoGML dates to 1969, SGML from the 1970s. Internally we used something called BookMaster which kind of? looks like a precursor to HTML (you had :p. instead of <p>, :li. instead of <li>). There was an effort circa 1990-1991 (as TBL was developing HTML and HTTP) called HyTime which was an SGML application focused on hypermedia. HTML killed that fairly quickly. See https://en.wikipedia.org/wiki/Charles_Goldfarb https://en.wikipedia.org/wiki/Charles_Goldfarb who shepherded GML/SGML and https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...
- danborn26 4mo ago[flagged]
- msephton 4mo agoI loved the puzzle of thinking about the best semantic representation of content in HTML. Good times
- toponijo 4mo agoAside from the accessibility benefit mentioned in the article, I would think that using semantic HTML like this would also make AI tools more effective at understanding code
- currysausage 4mo agoGreat post. Very minor nitpick: ‘The small element must not be used for subheadings; for that purpose, use the hgroup element.’ ‘The small element represents side comments such as small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.’ (https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element https://html.spec.whatwg.org/multipage/text-level-semantics....)
- xg15 4mo agoAll the native GUI toolkits are dead, but people can write entire essays now on a single HTML element. I guess that's progress?