必须用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 工具报错，得人眼读一遍，问自己——这里是不是真有「这个词，它是什么意思」的映射？
