dl、dt、dd 的语义正确性取决于严格嵌套结构和保留默认缩进：dt 与 dd 必须为 dl 的直接子元素，dd 需保持 margin-inline-start 以维持视觉与可访问性语义；禁用全局重置、避免非法包裹、多对一/一对多需按规范书写，确保无样式时仍能被准确解析。
用 dl、dt、dd 构建“关联性数据”不是靠技巧堆砌，而是靠结构本身表达名-值、术语-解释、问题-答案这类天然成对关系；一旦嵌套错位或样式重置过猛，语义链就断了，屏幕阅读器读不准，搜索引擎也难提取。
为什么 dl 渲染出来像普通段落？缩进没了
这不是代码写错了，是现代 CSS 重置（比如 normalize.css）把 dd 默认的 margin-inline-start（约 40px）设成了 0。浏览器原生只靠这个缩进来暗示“这是解释”，没了它，dt 和 dd 就挤在一起，语义视觉双双失效。
- 别写
dd { margin: 0; }—— 这等于主动抹掉唯一语义提示 - 恢复缩进推荐用逻辑属性：
dd { margin-inline-start: 1.5em; } - 如果用了 CSS-in-JS 或 Tailwind，检查是否全局重置了
dd的 margin - 用浏览器开发者工具的“Computed”面板查
dd的实际margin-inline-start值，比看源码更准
dt 和 dd 的嵌套边界在哪？哪些写法会破坏可访问性
dt 和 dd 是兄弟节点，不是父子关系，它们都必须直接属于 dl。任何偏离这个层级的嵌套，都会让屏幕阅读器无法建立术语与解释的配对。
- 禁止在
dt外层包p或div：<p><dt>API</dt></p>是无效结构，读屏器跳过dt - 不允许孤立
dd：<dl><dd>xxx</dd></dl>没有前导dt，解析失败 -
dt里可以放code、em等内联元素，但不能放div、p、ul - 动态渲染时（如从 JSON 生成），确保每个
dd前面紧邻且仅有一个dt，否则语义链断裂
想横向排布术语和解释，能用 flex 吗？怎么不伤语义
可以，但前提是 DOM 结构不变——flex 或 grid 只管样式，不能动语义层级。强行用 float 或 inline-block 对 dt 做宽度控制，会让焦点顺序错乱、打印样式异常、读屏器无法识别“列关系”。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给
dl设display: grid; grid-template-columns: max-content 1fr; - 再清掉干扰：
dt, dd { margin: 0; } - 这样每个
dt+对应dd自动占一行，视觉可控，语义完整 - 避免给
dt加position: absolute或width固定值，会导致响应式失效
多个术语共用一个解释，或者一个术语多角度解释，怎么写才安全
HTML5 允许 dt 和 dd 多对一或一对多，但写法稍有不慎就会引发歧义或解析偏差。
- 多个
dt共享一个dd（如“HTML”“CSS”“JS”共用“前端核心技术”解释）：连续写dt，再跟一个dd，语义清晰 - 一个
dt配多个dd（如“闭包”的 JS 定义 + 数学定义）：每个dd独立成块，别塞进同一个dd里用p分段 - 避免交叉嵌套：
<dt>A</dt><dd>1</dd><dt>B</dt><dd>2</dd><dd>3</dd>是合法的，但B会关联到2和3，不能反推A也关联3 - 复杂场景（如带子项的配置说明）建议拆成多个
dl，比强行在一个dl里嵌套更可靠
真正难的不是写出语法正确的 <dl><dt>API</dt><dd>应用程序编程接口</dd></dl>，而是确保它在无 CSS、JS 关闭、纯键盘导航、屏幕阅读器播报时，依然能被准确识别为“术语：API，定义：应用程序编程接口”。语义不是锦上添花，是默认底线。
