logo标签列表

HTML中的dfn和abbr标签以及title属性的正确使用

html
10
我想弄清楚如何正确使用 dfn 标签、title 属性和 abbr 标签。我不确定自己是否使用得正确，希望有人能告诉我下面的例子是否正确，如果不正确，哪些例子是错误的以及为什么，这样我就能更好地理解并纠正错误。谢谢！
例子1:
<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

例子 2

<p><dfn title="Cascading Style Sheets">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

例子3

<p><dfn title="A style sheet language used for describing the look and formatting of a document written in a markup language.">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

例子 4

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

示例5

<p><dfn title="CSS"><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>
3个回答
7

我认为应该是：

<p>
  <dfn>
    <abbr title="Cascading Style Sheets">CSS</abbr>
  </dfn>
  is a simple mechanism for adding style to Web documents.
</p>

否则，如果它仅包含具有title属性的缩写元素，则该术语是该属性的值。 MDN
我只能说他们没有遵循建议。 - beautifulcoder
2
TL;DR: 尽管其中两个例子在语义上是正确的，但最符合语义的方式是示例 4。
<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

正确。根据Mozilla的说法，由于您没有使用title属性，“CSS”被认为是在p标签内定义的术语。

<p><dfn title="Cascading Style Sheets">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

不正确。根据Mozilla的说明，title属性是用于表示“该术语的另一种形式”，但仅在术语本身不是缩写时使用。当术语是缩写时，应在 dfn元素内使用abbr。

<p><dfn title="A style sheet language used for describing the look and formatting of a document written in a markup language.">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

不正确。 title 属性是用于 "另一种形式的术语"，而不是它的定义。

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

正确。根据Mozilla的说法，这是推荐的用法。

<p><dfn title="CSS"><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

不正确的。根据Mozilla的说法，如果dfn元素包含一个子元素，且没有任何自己的文本内容，而子元素是具有自身title属性的abbr元素，那么abbr元素title属性的确切值就是所定义的术语。因此，语义系统（A.I.、潜在读者、可访问性等）不应考虑dfn元素的title属性。

N.B. 我主要借鉴了Mozilla上的dfn文章中的“将缩写和定义一起使用”和“指定所定义的术语”部分来制作此答案。

我们可以使用 <p><dfn><abbr title="纯素食">V</abbr> 纯素食 </dfn> <dfn><abbr title="不含麸质">gf</abbr> 不含麸质</dfn></p>。谢谢。 - appu
1
不完全正确。它总是取决于您在语义上试图实现什么。我猜测一些事情，但我认为<dfn>标签在这种情况下并不符合语义。以下是正确的：<p><abbr title="素食主义者">V</abbr> <abbr title="无麸质">gf</abbr></p>。 - Kad
在你的例子中，你完全省略了“纯素”或“无麸质”。我需要将“纯素”或“无麸质”显示在内容旁边，即显示在V或gf旁边，这就是为什么我使用了<dfn>，你会怎么做呢？ - appu
1
这些要求非常有帮助！;-) 因为它没有包括“素食主义者”或“无麸质”的定义，而只是缩写后跟全称，我认为最语义化的方式是： <p><abbr title="Vegan">V</abbr> 素食主义者 <abbr title="Gluten Free">gf</abbr> 无麸质</p>你可以添加两个span来进行样式设置，但它们不会增加语义含义。 - Kad
1
它们在与HTML规范和草案中abbr和dfn的松散定义相匹配的意义上都是“正确”的。这里的陈述实际上根本不是一个定义（它说了一些关于CSS的事情，而不是指定其必要的特征来区分它与其他实体，并且“CSS”并不是一个缩写，而是一个名称，尽管名义上形成了某些单词的缩写）。但规范非常模糊，甚至问题中的标记也可以被解释为匹配这些元素的“语义”。问题是相当学术性的，因为abbr和dfn几乎对除默认渲染的某些功能以外的任何内容都没有影响，您可以和应该使用CSS规则来确认或覆盖这样的样式，然后您几乎可以使用span。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接