DFN标签定义专业术语的HTML文档结构细节-html教程-PHP中文网

dfn必须包裹被定义的术语本身，不能包裹整句解释；其语义提取优先级为title属性值>子元素title>自身文本内容，且仅在术语首次出现并紧邻明确定义时使用。

dfn标签定义专业术语的html文档结构细节

dfn必须包裹被定义的词本身，不能套整句解释

很多人把dfn当作文本容器，写成<dfn>一种用于描述网页结构的标记语言</dfn>——这直接违反语义：它标记的不是“术语”，而是“解释”。浏览器和屏幕阅读器会误判定义对象，SEO 工具也无法提取有效术语。

正确做法是只把术语本体包进去，比如<dfn>HTML</dfn>、<dfn>Web API</dfn>（注意带空格或连字符的术语必须完整包裹，不可拆分）。

术语含标点或符号（如CSS-in-JS、fetch()）时，整个字符串必须作为单一文本出现在dfn内
禁止嵌套：<dfn><dfn>DOM</dfn></dfn>会导致外层dfn的title被忽略，辅助技术可能跳过
不要给dfn加链接再套术语，如@#@#@#@#@#@#@#@#@#@0——语义冲突；应先定义，再单独链接

title属性决定“被定义的是什么”，不是可选装饰

dfn的语义提取有严格优先级：浏览器和读屏软件**不读你看到的文本**，而是按顺序取值——先看title属性，再看子元素（如abbr）的title，最后才 fallback 到dfn自身文本。任一命中即终止，不会回退。

这意味着<dfn title="Document Object Model">DOM</dfn>定义的是“Document Object Model”，不是“DOM”；而<dfn title="">DOM</dfn>定义的是空字符串，不是“DOM”。

缩略词必须用全称作title：<dfn title="World Health Organization">WHO</dfn>
函数名、语法符号等无需展开时，可省略title：<dfn>querySelectorAll()</dfn>
避免title与内部文本重复，如<dfn title="HTML">HTML</dfn>没提供新信息，等于白写
dfn内必须有可见文本，<dfn title="HTTP"></dfn>无效——屏幕阅读器读不出任何词

dfn必须紧邻定义语句，且父容器要有定义语义

dfn不是视觉强调工具，它只在“术语首次出现 + 紧接完整解释”的上下文中生效。单独一行<dfn>baseline</dfn>，或塞进<div>、<code><td>、<code><code>里，都属于语义断连——这些容器不具备定义承载能力。

规范明确要求：最近的块级祖先必须是<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<section></section>、<dt></dt>或<figcaption></figcaption>。定义语句最好在同一<p></p>内自然衔接，例如：<p><dfn title="HyperText Markup Language">HTML</dfn> 是用于创建网页的标准标记语言。</p>

错误示例：<div> <dfn>viewport</dfn> 是浏览器可视区域。</div>——<div>无定义语义，<code>dfn失效
错误示例：<h2><dfn>Accessibility</dfn></h2> <p>指让残障用户也能使用网页的能力。</p>——dfn与定义句跨标签，上下文断裂
正确结构推荐：术语放句首，后接冒号/逗号+解释，保持自然阅读流

同一术语只能用一次dfn，判断“首次”要看文档结构而非视觉顺序

很多开发者凭印象觉得“这是第一次看到这个词”，就随手加dfn，结果在前文某段已用自然语言解释过validator，后面又套<dfn>validator</dfn>——这属于语义污染，比不用更糟。

检查是否该用dfn，必须从文档顶部开始逐段扫描，确认该词此前未以任何方式（哪怕没套标签）被解释、展开或赋予含义。术语表<dl> <dt><dfn>...</dfn></dt> <dd>...</dd> </dl>中加dfn仅当此处才是全文首次定义。

如果术语已在前文某处明确定义（如“URI 是统一资源标识符”），后续所有出现都不该再用dfn
abbr和dfn逻辑不同：abbr只负责缩写展开，dfn负责定义行为；二者可共存，但不能互相替代
嵌套abbr在dfn里合法（如<dfn>语义化<abbr title="HyperText Markup Language">HTML</abbr></dfn>），但反过来不行