Blogging about HTML elements¹? *chefs kiss*
Here’s Ben Myers on the (aptly described) “underrated” Definition List (
<dl>) element in HTML:
You might have also seen lists of name–value pairs to describe lodging amenities, or to list out individual charges in your monthly rent, or in glossaries of technical terms. Each of these is a candidate to be represented with the
- Definition List
- Coolness factor
Ben says he’s satisfied with HTML semantics, even when the benefits of using them are theoretical. But in the case of
<dl>, there are at least some tangible screen reader benefits, like the fact that the number of items in the list is announced, as expected (for the most part), like ordered and unordered lists. Although that makes you curious what number it announces, doesn’t it? Is it the number of children, regardless of type? Just the
Speaking of children, this might look weird:
<dl> <div> <dt>Title</dt> <dd>Designing with Web Standards</dd> </div> <div> <dt>Author</dt> <dd>Jeffrey Zeldman</dd> <dd>Ethan Marcotte</dd> </div> <div> <dt>Publisher</dt> <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd> </div> </dl>
But those intermediary
<div>s that group things together are cool now. They’re awfully handy when you want to style the groupings as “rows” or do something like add a border below each group. No
<div>s for ordered or unordered list though, just definition lists. Lucky sacks. What’s next? Is
<hgroup> gonna make a comeback?
- I remember Jen Kramer did 30 days of HTML not long ago, and that was fun.
Thanks for the shoutout on #30DaysOfHTML! Currently running #15DaysOfCSS. https://jen4web.substack.com/welcome
is there a way to access 100DaysOfHTML?
Scroll to find 30DaysOfHtml
Thanks for the instruction about the usage of
dl. As a side note, the element has been repurposed as “description list” in the latest spec.
Great use case for the
<dl> property element, will certainly help with accessibility.
I really wish for them to get recognition. Such a great semantic utility.