dfn 标签需紧邻定义句并包裹被定义词，配合 title 属性提供简洁准确的定义；长定义可用 id + aria-describedby 显式关联；嵌套 abbr 时由 abbr 负责展开、dfn 表示首次定义。

dfn 标签本身不提供解释，只标记“这个词在此处被定义”——真正实现术语与定义的语义化链接，得靠结构设计和辅助属性配合。

必须紧邻定义句，不能孤立使用

dfn 只有在完整定义语句中才生效。它要包裹被定义的词，后面立刻跟上自然语言解释，中间不能插其他标签或换行。

• ✅ 正确：

  语义化 指使用具有明确含义的 HTML 元素（如 article、

  ）来组织内容。

• ❌ 错误：

  语义化

  指使用具有明确含义的 HTML 元素……

  

  PigX UI 前端开发

  PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

  下载
  —— 跨段落，断开语义关联
• ❌ 错误：

  我们用 DOM 来操作页面。DOM 是文档对象模型的缩写。

  —— 解释没紧贴，且重复术语无定义动作

用 title 属性明确指定定义内容

浏览器和屏幕阅读器优先读取 dfn 的 title 属性值作为术语定义，而不是标签内文字。这个值应是准确、简洁的全称或标准解释。

• ✅ 推荐：DOM —— title 提供权威全称，内部保留常用缩写
• ❌ 危险： —— title 为空或仅是术语本身，提取失败，可访问性归零
• ⚠️ 注意：title 内容不能超长（建议 ≤255 字符），否则部分工具会截断

用 id + aria-describedby 建立显式链接

当定义较长、需复用，或要避免 title 长度限制时，可用 aria-describedby 主动绑定 dfn 与解释段落。

• 给定义段落加唯一 id：

  Web API 是浏览器提供的一组接口，用于访问设备功能或控制页面行为。

• 在术语处引用：Web API
• 确保目标元素可见、未隐藏（不能有 display: none 或 aria-hidden="true"）

嵌套 abbr 时注意语义分工

缩写词首次出现且需同时表明“是缩写”和“被定义”时，可合法嵌套 API。

• abbr 负责展开缩写，title 必须是自然语言全称
• dfn 不加 title，只包裹整个缩写结构，表示“这个缩写在此正式引入并定义”
• 顺序不可颠倒：... 合法；... 违反语义