On The <dl>
The <dl> element is a useful HTML feature for representing lists of name-value pairs. It consists of three components: <dl> for the list, <dt> for the term, and <dd> for the description. Using <dl> enhances web accessibility by allowing screen readers to interpret the structure of the information more effectively than traditional nested <div>s.
- ▪The <dl> element is designed to represent a list of name-value pairs.
- ▪It includes <dt> for description terms and <dd> for description details.
- ▪Using <dl> improves accessibility for screen reader users by providing a clearer structure.
Opening excerpt (first ~120 words) tap to expand
Introduction The <dl>, or description list, element is underrated. It’s used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you’ve probably seen these layouts out in the wild… Each of these examples shows a list (or lists!) of name–value pairs. 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. So what does that look like? The Anatomy of a Description List I’ve been saying “<dl>,” when really, I’m talking about three separate elements: <dl>, <dt>, and <dd>. We start with our <dl>.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Ben Myers.
Discussion
0 commentsMore from Ben Myers
