dl标签仅用于表达「术语–解释」语义关系，如api参数、faq问答、技能项等名词性术语配人类可读说明的场景；禁用作两栏布局、自定义列表或键值对容器，否则破坏可访问性、seo与屏幕阅读器导航逻辑。
dl 不是用来做“自定义列表”或“两栏布局”的，它只干一件事：表达「术语–解释」的语义关系。用错地方，屏幕阅读器读不准、SEO 提取关键词跑偏、 axe 扫描直接报严重可访问性错误。
什么时候必须用 dl 而不是 ul 或 ol
只有内容天然构成「名词与说明」的映射时，dl 才是唯一语义正确的选择：
- API 文档里的参数名（
timeout）和说明（“超时毫秒数，默认 5000”） - FAQ 页面的问题（
英文不好能不能学编程）和答案（多个dd连续写） - 简历中技能项（
React）与掌握程度（“熟悉 Concurrent Rendering，能调试 Suspense 边界”） - 产品规格表（
接口类型→USB-C × 2，HDMI 2.1）
别把步骤流程、功能亮点、纯名词罗列塞进去——那是 ol 和 ul 的活儿。
dt 和 dd 的配对规则与常见翻车点
浏览器靠 DOM 顺序自动关联最近的前置 dt，但结构稍乱就断链：
- ✅ 正确：
dt后紧跟一个或多个dd，表示同一术语的多角度解释 - ✅ 正确：连续多个
dt（如<dt>src</dt> <dt>data-src</dt>）共用下一个dd - ❌ 错误：
dd出现在没有前置dt的位置（比如dl开头就写dd），HTML 验证失败，读屏器跳过 - ❌ 错误：在
dl里套div或p包裹dt/dd，浏览器会把容器提到dl外，DOM 结构断裂 - ⚠️ 注意：
dt里不能放button、a、input—— 术语不是操作入口，交互控件该放dd里
CSS 布局怎么写才不破坏语义
默认 dd 的 margin-left 不一致、不可控，靠清空它再加 padding 是假修复：
- ✅ 推荐最小安全重置：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; }+dt { font-weight: 600; }+dd { margin: 0; grid-column: 2; } - ⚠️ 别用
display: flex直接作用于dl—— 它会让dt和dd在可访问性树中失去父子逻辑关联 - ⚠️ 移动端响应式要加
@media (max-width: 768px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } }，否则小屏上术语被挤到行尾 - ❌ 别给
dd设margin-left: 0就完事 —— 清掉缩进后若没补视觉区分（比如border-left或背景色），普通人根本分不清哪段属于哪个术语
嵌套 dl 的边界在哪
嵌套只允许出现在 dd 内部，且真有必要才嵌：
- ✅ 合规场景：某个 API 参数是对象，其子字段需要进一步说明，比如
headers下的Content-Type和Authorization - ⚠️ 嵌套深度建议 ≤2 层 —— 超过两层，键盘 Tab 导航路径变长，屏幕阅读器逐层进入退出成本高，视觉上也容易混淆归属
- ❌ 禁止在
dt里嵌dl，也不允许dl外部直接嵌套 —— 违反 HTML 结构规范，解析器会降级处理
最难的从来不是怎么写，而是判断一组内容是否真的构成「描述关系」。这没法靠 lint 工具检测，得人眼通读：如果去掉 dt，dd 是否还能独立成立？如果能，那大概率不该用 dl。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
