这篇文章介绍了HTML中常被低估的<dl>（描述列表）元素，它由<dl>、<dt>和<dd>三个标签组成，用于展示名称-值对列表。作者通过实例说明这种结构在网页设计中的广泛应用场景和灵活性。

文章重述：《论描述列表

的妙用》

核心主题

HTML中的<dl>（描述列表）元素是被低估的语义化标签，它能优雅地呈现"名称-值"对列表结构。

关键内容

1. 元素构成

   • 由三个元素组成：
     • <dl>：描述列表容器（类似<ul>/<ol>）
     • <dt>：描述术语（名称项）
     • <dd>：描述详情（值项）
   • 支持一个<dt>对应多个<dd>
   • 允许用<div>包裹<dt>和<dd>组（唯一合法的包裹元素）

2. 语义化优势

   • 相比纯<div>嵌套方案，能为辅助工具提供结构化信息：
     • 屏幕阅读器可播报列表项数量
     • 支持列表导航和跳过功能
     • 提升可访问性（尽管浏览器支持度尚未完全统一）

3. 经典用例

   • 书籍元数据（书名/作者/出版社）
   • 术语表
   • 《龙与地下城》角色属性卡（展示5组不同的"名称-值"列表）
   • 住宿设施清单
   • 账单明细

4. 开发建议

   • 当出现"名称-值"对模式时优先考虑<dl>
   • 通过aria-label为列表添加说明
   • 参考MDN文档和HTML规范深入学习

技术细节补充

• HTML5前称为"定义列表"(definition list)，现扩展为更通用的描述列表
• 旧版术语<dt>/<dd>原意为"定义术语"和"定义详情"

（注：原文中的代码示例、脚注链接等辅助内容已根据中文阅读习惯进行简化处理，保留核心技术要点）

以下是评论内容的总结：

1. 关于

   标签的历史与语义

• 指出

  在HTML早期就已存在（评论2/14/16） "I was a bit surprised to see nested

  s...

  was part of HTML before 2.0" (评论2) "

  has been in HTML since.. the first draft in 1993!" (评论14)

• 提到HTML5规范变化（评论5/17） "Prior to HTML5, this was called a definition list" (评论5) "They're not name-value pairs, they're name-value groups" (评论17)

2. 使用体验反馈

• 正面评价（评论3/12） "The first time gave me that satisfying feeling...like completing a puzzle" (评论3) "I love DL. I think tables...were misused as DLs" (评论12)
• 样式挑战（评论14/19） "they can be challenging to style...using a lot of fixed pixel widths" (评论14) "you need to use a bit of css to make two lined-up columns" (评论19)

3. 可访问性问题

• 屏幕阅读器支持（评论3/11） "JAWS not announcing it correctly in 2018" (评论3) "Here's a useful note on how well screen readers support DL" (评论11)
• ARIA规范问题（评论17） "This is incorrect...either ditch the aria-label, or add role='list'" (评论17)

4. 技术讨论

• 嵌套问题（评论1/7/9） "Hoped to see CSS for the alternative, where
  is not nested" (评论1) "The GOV.UK...also uses the wrapper div for styling" (评论9)
• 多
  /
  用法（评论10/17） "What about multiple '
  ' for one or more '
  '?" (评论10) "you can have multiple
  in a row too" (评论17)

5. 其他观点

• 与的对比（评论15） "Why is it preferred over for laying out columns" (评论15)
  设计赞赏（评论6/8） "Good title" (评论6) "blog looks beautiful" (评论8)

  总结：评论主要围绕

  标签的语义价值、历史沿革、使用场景和样式挑战展开讨论，既有对其语义准确性的赞赏，也有对实际应用中样式和可访问性问题的关注。