dl、dt、dd 是专为术语-定义设计的语义标签，必须平行嵌套于 dl 下；误用布局会导致屏幕阅读器跳过、SEO 忽略及可访问性失效，恢复缩进应使用 margin-inline-start 而非 margin: 0。
dl、dt、dd 不是用来“做两栏布局”的，而是专为术语-定义关系设计的语义容器；用错结构会导致屏幕阅读器跳过、搜索引擎忽略、CSS 重置后直接不可读。
为什么突然没缩进了？
不是你写错了，是 normalize.css 或 UI 框架（如 Bootstrap、Tailwind）把 dd 的默认 margin-inline-start（约 40px）清掉了。浏览器原生只靠这个缩进来暗示“这是解释”，没了它，语义视觉线索就断了。
- 别写
dd { margin: 0; }——这等于主动抹掉可访问性锚点 - 恢复缩进优先用逻辑属性：
dd { margin-inline-start: 1.5em; } - 检查开发者工具中 computed 样式里的
margin-inline-start值，确认是否被重置 - 如果要加图标前缀，用
dd::before，别依赖缩进做对齐
dt 和 dd 必须平行嵌套，不能套娃
dt 和 dd 都必须是 dl 的直接子元素，彼此是兄弟关系。常见错误是把 dd 塞进 dt 里，或用 div 包一层再放进去——这会让屏幕阅读器跳过整个配对。
- ✅ 合法：
<dl><dt>API</dt><dd>应用程序编程接口</dd></dl> - ❌ 非法：
<dl><dt>API<dd>应用程序编程接口</dd></dt></dl>（dd在dt内） - ❌ 也非法：
<dl><div><dt>API</dt><dd></dd></div></dl>（div中断语义流） - 动态渲染时（如从 JSON 映射），确保每个
dd前都有且仅有一个dt，否则语义链断裂
横向排布时，别动 DOM 结构
想让 dt 和 dd 并排显示？可以用 display: grid 或 flex，但前提是保持原始层级：所有 dt 和 dd 仍是 dl 的直系子元素。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误做法：
dt { display: inline-block; width: 120px; }——屏幕阅读器无法识别列关系 - ✅ 正确做法：
dl { display: grid; grid-template-columns: max-content 1fr; }，再清掉dt、dd的默认margin - 多个
dd对应一个dt是推荐的（比如 HTTP 协议分协议类型、端口、状态码三条解释），每条dd独立语义，利于 JS 操作和无障碍朗读 - 避免给
dt加float或position: absolute——焦点顺序和打印样式会出问题
真正难的不是写对标签，而是坚持不把 dl 当布局工具用；一旦开始用它塞导航、做侧边栏、模拟表格，语义就塌了，后面所有可访问性补救都事倍功半。
