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
<dl>
element.
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 <dt>
elements?
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?
The post On the `dl` appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…