GoKawiilIntroduction
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> . This is the description list, akin to using a <ul> for an unordered list or an <ol> for an ordered list.
Copy code < dl > </ dl >
Fancy.
... continue reading