The HTML dfn and abbr tags and correct usage of the title attribute

Question

I am trying to figure out what is the correct way to use the dfn tag along with the title attribute and abbr tag I am not sure if I'm doing it correctly and was hoping if someone can tell me if any if not all of my examples below are correct or wrong if so which example(s) is wrong and why so I can have a better understanding of what I am doing and correct my error(s) Thanks?

Example 1

<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

Example 2

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

Example 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>

Example 4

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

Example 5

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

Answer 1

I think it should be:

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

Else, if it contains only an abbr element with a title attribute, then the term is the value of that attribute.

MDN

Answer 2

TL;DR: Although two of these examples are semantically correct, the most semantic way is example 4.

<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

Correct. According to Mozilla, because you are not using the title attribute, "CSS" is considered to be the term defined by the sentence within p.

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

Incorrect. According to Mozilla, the title attribute is meant for "another form of the term", but only when the term defined isn't an abreviation. When the term is an abreviation, abbr should be used within the dfn element.

<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>

Incorrect. The title attribute is meant for "another form of the term", not its definition.

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

Correct. According to Mozilla, that's the recommended usage.

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

Incorrect. According to Mozilla, if the dfn element contains a single child element and does not have any text content of its own, and the child element is an abbr element with a title attribute itself, then the exact value of the abbr element's title attribute is the term being defined. Therefore, the title attribute of the dfn element shouldn't be taken into account by semantic systems (A.I., lurkers, accessibility, etc.)

---

N.B. I produced this answer mostly leveraging the "Using abbreviations and definitions together" and "Specifying the term being defined" sections of the dfn article on Mozilla

Answer 3

They are all “correct” in the sense of matching the loose definitions of abbr and dfn in HTML specifications and drafts. The statement here is not really a definition at all (it says something about CSS, instead of specifying its essential features needed to distinguish it from other entities, and “CSS” is not really an abbreviation but name, though nominally formed as an abbreviation of some words. But the specs are so vague that even the markup in the question may well be interpreted as matching the “semantics” of these elements.

The question is rather academic, since abbr and dfn have almost no impact on anything but some features of default rendering, and you could and should use CSS rules that either confirm or override such styling, and then you might almost as well use span.