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或 CSSfont-weight,不是靠包裹块级标签“造重量”
dt 和 dd 的配对规则到底怎么算
DOM 顺序决定逻辑归属:dd 属于它前面最近的那个 dt,不依赖是否紧邻。这种松耦合带来灵活性,也埋下隐患。
- 一个
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 内部 —— 这些错误不会导致页面崩溃,但会让语义完全失效。











