dl标签专用于表达「名–值对」或「术语–解释」语义关系，适用于api参数、faq、技能项等天然成对且顺序无关的场景，禁用作布局或步骤列表。
dl 标签不是“自定义列表”，它是专用于表达「名–值对」或「术语–解释」语义关系的原生 HTML 元素。用错场景，不仅视觉难调，还会破坏可访问性、影响 SEO 和屏幕阅读器理解。
什么时候必须用 dl 而不是 ul 或 ol
只有当内容天然构成「名词与说明」的映射关系时，dl 才是语义唯一正确的选择：
-
API 文档中的参数表：比如limit（术语）对应 “每页返回条数，整数，默认 20”（解释） -
FAQ 页面：每个问题是一个dt，答案是一组dd -
简历技能项：如React→ “熟练使用 Hooks 与 Context，熟悉 Concurrent Rendering” -
产品规格参数：品牌、型号、重量、接口类型等成对出现的字段 -
微数据（Microdata）或 JSON-LD 的可视化层：dl是结构化数据最自然的 DOM 对应
别为了“看起来像两栏”就套 dl；也别把步骤流程（1→2→3）硬塞进 dt/dd —— 那该用 ol。
dt 和 dd 的嵌套规则与常见错误
浏览器按 DOM 顺序自动关联最近的前置 dt，但写法稍有偏差就会导致语义断裂：
- ✅ 正确：多个
dd紧跟一个dt，表示同一术语的多角度解释 - ✅ 正确：
dt连续写两个（如<dt>src</dt> <dt>data-src</dt>），共用下一个dd - ❌ 错误：在
dl里插div或p包裹dt/dd，HTML 验证失败，读屏器无法识别 - ❌ 错误：
dd单独出现在没有前置dt的位置（如开头或dt缺失），语义丢失 - ❌ 错误：给
dt套button或链接 —— 术语不该是可交互控件，操作放dd里
注意：dd 可以包含段落、列表甚至另一个 dl，但嵌套建议 ≤2 层，否则导航复杂度陡增。
CSS 布局建议：从默认塌陷到响应式两栏
浏览器默认只给 dd 加 margin-left，现代 CSS 重置常清空它，结果就是术语和解释挤在一起。别靠 padding-left 拉间距，热区会错位：
- 最简修复：用
dl { display: grid; grid-template-columns: max-content 1fr; }+dd { grid-column: 2; }，确保解释始终落在第二列 - 移动端友好：加
@media (max-width: 768px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } } - 避免用
float或绝对定位 —— 容易错行，且不支持语义流回退 -
::marker对dt/dd无效，别白费劲；图标前缀优先用::before+ 字体图标
记住：dl 默认无序号、无圆点、不自动换行 —— 这不是 bug，是语义设计决定的渲染逻辑。
可访问性与搜索引擎怎么看待 dl
屏幕阅读器会明确播报 “term: xxx”、“definition: yyy”，这是 ul/ol 完全不具备的能力：
-
dt内容必须是简洁名词短语，不能是完整句子或带标点的操作指令 - 搜索引擎将
dl内容识别为高信噪比的结构化信息，FAQ 页面启用dl更容易触发富摘要（Rich Snippet） - 禁用
aria-label或role="list"强行覆盖原生语义 —— 浏览器和辅助工具已内置role="term"/role="definition" - 旧版 IE（≤IE8）对
dd缩进处理不一致，但 2026 年绝大多数项目已无需兼容
真正难的不是写对标签，而是设计阶段就厘清：这部分内容，到底是「要罗列的项目」，还是「需要被定义的名词」？一旦混淆，后续所有样式、JS、无障碍适配都会绕弯路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
