dt应只含纯文本或行内元素（如），嵌套<p>等块级元素会导致读屏器跳过术语、误读为“段落”；所有dt和dd必须是dl的直接子元素且严格相邻，中间不得插入任何其他标签或空白节点。
dt里塞
或
会导致读屏器跳过术语
很多开发者以为给dt加个<p>能“统一段落样式”，结果屏幕阅读器直接朗读“段落”而不是里面的内容。HTML5虽允许dt含块级元素，但实际兼容性极差——NVDA、VoiceOver等主流工具会忽略嵌套结构，只识别最外层标签语义。
-
dt应只包含纯文本、<code>、<em>这类行内元素 - 需要换行？用CSS的
white-space: pre-line或display: inline-block控制，别动结构 - 要强调某个词？用
<strong>或<em>，不是<div>
多个dd必须紧接在同一个dt之后，不能隔开
常见错误是把dt和它对应的dd拆到不同<div>里，或者中间插个<p>。一旦破坏文档流顺序，语义链就断了：读屏器无法判断“这个dd到底属于哪个dt”。
- 合法结构：
<dt>timeout</dt><dd>number</dd><dd>3000</dd> - 非法结构：
<dt>timeout</dt><p>说明</p><dd>number</dd>（<p>打断了配对） - 所有
dt和dd必须是dl的**直接子元素**，中间不能有其他标签
用CSS Grid重排术语-解释布局时，dd的margin必须清零
浏览器默认靠dd的margin-left实现缩进，但Grid布局下这个值会和gap叠加，导致错位。不手动重置，术语列和描述列就对不齐。
- 关键样式：
dd { margin: 0; grid-column: 2; } -
dt必须显式设grid-column: 1，否则可能被当作匿名网格项处理 - 窄屏回退时，
@media (max-width: 480px) { dt, dd { grid-column: 1; } }比单纯改grid-template-columns更可靠
多个dt共享一个dd的写法极少用，且顺序不能错
比如<dt>HTML</dt><dt>CSS</dt><dd>前端三大基础技术</dd>语法合法，但实际中容易误读——读屏器可能把第二个dt当成前一个的补充，而非独立术语。除非明确需要同义词共用释义（如“JS”“JavaScript”），否则避免这种结构。
立即学习“前端免费学习笔记（深入）”；
- 若真要用，确保所有
dt连续出现，中间无空格、无注释、无换行符干扰解析 - 更稳妥的做法是复制
dd内容，保持一一对应，语义更健壮 - 多数文档生成工具（如JSDoc、Sphinx）根本不支持多
dt单dd输出，容易在自动化流程中出错
dt和dd在DOM树里严丝合缝地挨着，中间不插任何东西——连一个看不见的文本节点都可能让读屏器逻辑错乱。
