HTML <dl> 元素被严重低估
推荐指数 46.0 NO. 015 · 2026.05.24
发布2026/05/23Score269Comments81
为什么值得看
一篇 2021 年的文章重新发掘了 HTML 描述列表元素 <dl> 的实用价值，它原生支持键值对语义且比滥用 div/ul 更符合可访问性标准。前端工程师可以立刻用它替换掉大量手写的「标签+内容」布局，减少 CSS 负担同时提升屏幕阅读器体验。
编辑判断
这篇文章在 2021 年发布，却在 2024 年底登上 HN 热榜，说明前端社区对「语义化 HTML」的忽视是个长期顽疾。大多数团队遇到键值对布局时默认用 div + flexbox 或定义列表 dl 但用错结构，导致屏幕阅读器无法正确播报「术语-解释」关系。
真正值得注意的不是 <dl> 本身，而是作者展示的多种变体用法：嵌套 <div> 实现 grid 布局、配合 CSS counter 做自动编号、甚至用于对话气泡结构。这些模式可以直接复制到设计系统组件库中，替代现有的 DescriptionList 或 KeyValue 组件。
如果你在做组件库或设计系统，建议审计现有的 KeyValue、Metadata、PropertyList 组件，看有多少可以用原生 <dl> 重构——这通常能减少 20-30% 的 DOM 节点数。
社区反馈
意见分歧 74 条评论
核心争论：原生语义标签 vs div 滥用：可访问性收益是否被屏幕阅读器兼容性抵消
Hoped to see CSS for the alternative, where <div> is not nested inside the <dl>. Too used to thinking of div as "layout containers."
CSS Grid is a very good friend when trying to style DL without extra DIV wrappers. An example: dl { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto; } dt { grid-column-start: 1; } dd { grid-column-start: 2; }
I was a bit surprised to see nested <div>s given as some sort of precursor pattern, when <dl> was part of HTML before 2.0 back in the days of table layout.