HTML abbr and a together-CodePudding

When using abbr and a (acronym and link) together, is there a preferred order should they be nested? Considerations? There is also the little detail about cursor style conflict depending on browser.

<a href="https://bla.com">
 <abbr title="Tooltip">
  This is some content
 </abbr>
</a>

<abbr title="Tooltip">
 <a href="https://bla.com">
  This is some content
 </a>
</abbr>

It seems to look the same here.

CodePudding user response：

According to the standard, phrasing content can only include other phrasing content. The abbr tag refers to phrasing content, but the a tag, according to the documentation, belongs to this category only when it contains other phrasing content.

In your example, both options are acceptable (since there is only phrasing content inside a), but since the abbreviation is usually an indivisible element, and for uniformity it is probably better:

<a href="https://bla.com">
 <abbr title="Tooltip">
  This is some content
 </abbr>
</a>

Since there may be such cases:

// Good - Concise and semantically correct
<a href="https://bla.com">
 <span>before...</span>
 <abbr title="Tooltip">
  This is some content
 </abbr>
 <span>...after</span>
</a>


// Bad - too fragmented
<a href="https://bla.com">
  <span>before...</span>
</a>
<abbr title="Tooltip">
  <a href="https://bla.com">
    This is some content
  </a>
</abbr>
<a href="https://bla.com">
  <span>...after</span>
</a>