必须用dl而非ul或ol,仅当内容天然构成「名词性术语与对应解释」的从属关系时,如API参数、FAQ问答、商品规格等;误用于步骤清单或两栏布局将破坏语义、损害可访问性与SEO。

别用 dl 做两栏布局,也别把步骤清单塞进去——它只适合表达「术语与解释」的从属关系,用错语义,屏幕阅读器会读错,SEO 也会掉权重。
什么时候必须用 dl 而不是 ul 或 ol
当你有一组名词性短语(比如参数名、技能项、FAQ 问题)和它们对应的说明文字,并且二者存在明确的「谁解释谁」逻辑时,dl 才是唯一合法选择。
-
API文档里的timeout参数后跟一段说明文字 → 合法 - 简历中「React」后面写「熟练,可独立开发组件库」→ 合法
- FAQ 页面里「英文不好能不能学编程?」后面接一段回答 → 合法
- 把「第一步:安装 Node.js」「第二步:初始化项目」硬塞进
dl→ 错误,这是有序过程,该用ol - 用
dl排版产品功能图标+标题 → 错误,没术语-解释关系,纯视觉布局不该抢语义标签
dt 和 dd 必须直接子元素于 dl,中间不能插任何标签
浏览器解析时会自动“修复”非法嵌套,但结果不可控:DOM 结构断裂、CSS 选择器失效、屏幕阅读器跳过内容。
- ❌ 错误写法:
<dl><div><dt>src</dt><dd>图片地址</dd></div></dl>→div被提到dl外,dt/dd孤立在 body 中 - ✅ 正确写法:
<dl><dt>src</dt><dd>图片地址</dd></dl> - 多个
dt共享一个dd是允许的(如别名),但dt里不能放button、a或p—— 它只接受内联内容
用 CSS Grid 重置 dl 样式比靠默认缩进更可靠
浏览器给 dd 加的 margin-left 值不一致,多行文本易错位;单纯清掉又失去视觉区分,用户看不出哪段属于哪个术语。
立即学习“前端免费学习笔记(深入)”;
- 推荐最小安全样式:
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; }+dt { font-weight: 600; }+dd { margin: 0; grid-column: 2; } - 别用
flex替代grid:无法强制每个dd固定在第二列,换行后容易错列 - 嵌套
dl只能出现在dd内部,且建议不超过两层 —— 深了键盘导航路径变长,读屏器逐层进出体验差
真正难的不是怎么写,而是判断一组内容是否构成「描述关系」:这没法靠 lint 工具报错,得人眼读一遍,问自己——这里是不是真有「这个词,它是什么意思」的映射?



















