dt标签必须嵌套在dl中且至少配一个dd，否则语义断裂、屏幕阅读器无法识别；禁止在dt内嵌p等块级元素，仅允许短语级行内内容；dd按DOM顺序归属前最近dt，允许多对多配对，但严禁孤立dd或混入非dt/dd元素。

dt 标签不是独立可用的术语定义工具，它必须嵌套在 dl 内，且后面至少要跟一个 dd —— 否则语义断裂，屏幕阅读器无法识别“这是个术语”。

为什么dt不能单独出现或套p

浏览器虽能渲染 <dt><p>API</p></dt>，但读屏器大概率跳过 p，只朗读“段落”，而非“API”。HTML5 允许 dt 包含块级元素，但实际无障碍实践中，这会切断术语的语义焦点。

• dt 应只含短语级内容：纯文本、code、em、strong 等行内元素
• 需要换行？用 CSS 的 white-space 或 display: inline-block 控制，别加 p 或 div
• 需要强调？用 strong 或 CSS font-weight，不是靠包裹块级标签“造重量”

dt 和 dd 的配对规则到底怎么算

DOM 顺序决定逻辑归属：dd 属于它前面最近的那个 dt，不依赖是否紧邻。这种松耦合带来灵活性，也埋下隐患。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 一个 dt 后接多个 dd：合法且常见，比如参数说明中的“类型”“默认值”“是否必填”
• 多个 dt 连续出现，共用一个 dd：合法（如 RESTful API 和 REST API 共享同一解释），但必须确保 dd 真正适用于所有前序 dt
• 绝对禁止孤立 dd：即前面没有 dt，HTML 验证器会报错，读屏器也会丢失上下文

动态渲染时最容易漏掉的结构检查点

从 JSON 渲染术语表时，程序往往只遍历字段名和描述数组，却忽略 DOM 层级约束。

• 必须保证每个 dd 节点的父级是 dl，且其前序兄弟节点中存在未被其他 dd 消费的 dt
• 避免在 dt 和 dd 中间插入 div、p 或注释节点 —— 这会让语义树断开，dl 的子元素只能是 dt 或 dd
• 服务端模板或前端 JSX 中，条件渲染 dd 时，要同步控制 dt 是否存在，不能只删 dd 留空 dt

真正难的不是写对第一个 dt，而是保证整片列表里没有一处“孤儿 dd”、没有一个 dt 被 p 包裹、也没有任何非 dt/dd 元素混入 dl 内部 —— 这些错误不会导致页面崩溃，但会让语义完全失效。