A description list groups terms with their associated descriptions. Use <dl> for the list, <dt> for each term, and one or more <dd> elements for its descriptions. This structure suits glossaries, metadata, and paired values such as profile statistics or checkout totals. section 6.1
Profile statistics
Pair labels with values inside grouped elements: Posts with 856, Likes with 1358, and Followers with 1257. Apply flexbox to the <dl>, use space-around to distribute groups, and add gap: 12px so spacing occurs between items without changing the outer edges. Reset the browser’s default dd margin before styling the values. section 6.7.2
Checkout summary
Style terms as quiet labels and values as the prominent amounts. Use dt::after with content: ": " to insert separators. For a responsive checkout summary, keep the list’s appearance consistent across screen widths and use grid with auto and max-content columns, a gap, padding, and right-aligned dd values. section 8.2.5 section 8.3.2
Listing 6.1 Project HTML
<body>
<div class="card"> #1
<img class="portrait" src="./img/portrait.jpg" alt=""> #2
<h1>Annabelle Erickson</h1> #3
<div class="title">Software Developer</div> #4
<dl> #5
<div> #5
<dt>Posts</dt> #5
<dd>856</dd> #5
</div> #5
<div> #5
<dt>Likes</dt> #5
<dd>1358</dd> #5
</div> #5
<div> #5
<dt>Followers</dt> #5
<dd>1257</dd> #5
</div> #5
</dl> #5
<p class="summary">I specialize in UX / UI...</p> #6
<ul class="technologies"> #7
<li>CSS</li> #7
<li>HTML</li> #7
<li>JavaScript</li> #7
<li>Accessibility</li> #7
</ul> #7
<div class="actions"> #8
<button type="button" class="follow">Follow</button> #8
<a href="#" class="message">Message</a> #8
</div> #8
</div> #9
</body>
Inspect a complete profile-card scaffold containing a description list with grouped terms and values. section 6.1
Listing 6.12 Description-list HTML
<dl>
<div>
<dt>Posts</dt>
<dd>856</dd>
</div>
<div>
<dt>Likes</dt>
<dd>1358</dd>
</div>
<div>
<dt>Followers</dt>
<dd>1257</dd>
</div>
</dl>
Compare the semantic structure for Posts, Likes, and Followers before applying layout styles. section 6.7.2
Listing 8.22 Description list styles
dl {
display: grid;
gap: .5rem;
grid-template-columns: auto max-content; #1
padding: 0 1rem;
}
dd { text-align: right; }
See a compact grid recipe using two columns, automatic placement, spacing, padding, and right-aligned descriptions. section 8.3.2
