On the `dl`

This content originally appeared on CSS-Tricks and was authored by Chris Coyier

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.

Element

Definition List

Coolness factor

10/10

Versatility

7/10

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 content originally appeared on CSS-Tricks and was authored by Chris Coyier

Print Share Comment Cite Upload Translate Updates

APA

Chris Coyier | Sciencx (2021-09-14T22:37:21+00:00) On the `dl`. Retrieved from https://www.scien.cx/2021/09/14/on-the-dl/

MLA

" » On the `dl`." Chris Coyier | Sciencx - Tuesday September 14, 2021, https://www.scien.cx/2021/09/14/on-the-dl/

HARVARD

Chris Coyier | Sciencx Tuesday September 14, 2021 » On the `dl`., viewed ,<https://www.scien.cx/2021/09/14/on-the-dl/>

VANCOUVER

Chris Coyier | Sciencx - » On the `dl`. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/14/on-the-dl/

CHICAGO

" » On the `dl`." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/09/14/on-the-dl/

IEEE

" » On the `dl`." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/09/14/on-the-dl/. [Accessed: ]

rf:citation

» On the `dl` | Chris Coyier | Sciencx | https://www.scien.cx/2021/09/14/on-the-dl/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.