dt应只含纯文本或行内元素（如），嵌套等块级元素会导致读屏器跳过术语、误读为“段落”；所有dt和dd必须是dl的直接子元素且严格相邻，中间不得插入任何其他标签或空白节点。
dt里塞
或
会导致读屏器跳过术语
很多开发者以为给dt加个<p></p>能“统一段落样式”，结果屏幕阅读器直接朗读“段落”而不是里面的内容。HTML5虽允许dt含块级元素，但实际兼容性极差——NVDA、VoiceOver等主流工具会忽略嵌套结构，只识别最外层标签语义。
-
dt应只包含纯文本、<code>、<em></em>这类行内元素 - 需要换行？用CSS的
white-space: pre-line或display: inline-block控制，别动结构 - 要强调某个词？用
<strong></strong>或<em></em>，不是<div> <h3>多个dd必须紧接在同一个dt之后，不能隔开</h3> <p>常见错误是把<code>dt和它对应的dd拆到不同<div>里，或者中间插个<code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>。一旦破坏文档流顺序，语义链就断了：读屏器无法判断“这个dd到底属于哪个dt”。- 合法结构：
<dt>timeout</dt> <dd>number</dd> <dd>3000</dd> - 非法结构：
<dt>timeout</dt> <p>说明</p> <dd>number</dd>（<p></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树里严丝合缝地挨着，中间不插任何东西——连一个看不见的文本节点都可能让读屏器逻辑错乱。 - 合法结构：
