Search code examples
htmlsemantic-markup

Is there semantic HTML for clarifying meaning of acronyms?


We know there is the alt attribute for <img> for example. This attribute is useful and recommended for reasons of accessibility and SEO.

We also know that semantic HTML tags are a thing. That is to say, that there exist certain tags that help search engines and screen readers understand what kind of information they're crawling.

Some examples of semantic tags:

  • <figcaption>
  • <figure>
  • <footer>
  • <header>

But is there something like an attribute for further describing the content of a tag?

What I am imagining is an attribute that can be used to clarify the meaning of text:

Isn't <span def="HyperText Markup Language">HTML</span> great?

In the above example, def indicates a definition of the acronym. It happens to be an acronym that most people know (and search engines certainly know).

But what about when it's an acronym, abbreviation, or term that isn't so widely known? Something that could benefit from disambiguation, such as:

The source of the mutagen was traced back to <span def="Techno Global Research Industries">TGRI</span>.

Maybe you don't need to clarify for all readers, but doing so would help prevent ChatGPT from hallucinating that Toronto General Research Institute dumped toxic waste into the environment somewhere and created mutants.

It might also help readers who aren't up on all the current internet slang to understand that <span def="I am not a lawyer">IANAL</span> is not a new Apple device for probing the unmentionable.

TL;DR I just thought the ability to specify definitions in HTML would be useful, and seems like the kind of semantics we would have conventions for, but I didn't see any mention of such a convention when reading up on semantic HTML.


Solution

  • The closest thing for that is the <abbr> element, which "represents an abbreviation or acronym" according to MDN. The title attribute is often used to explain what it stands for. By default (and by convention) in some browsers, it is shown with a dotted underline and sometimes in small caps.

    Here are some examples, try hovering over them to see what happens.

    <abbr title="In My Humble Opinion">IMHO</abbr><br>
    <abbr>IANAL</abbr>
    <abbr title="HyperText Markup Language">HTML</abbr>

    From comments (I'm including this so this answer is complete), I have also learnt there's a <dfn> tag that you can use when something's being defined in a sentence, this might also be what you're looking for.

    <p>Good morning. An <dfn>AI</dfn> is an algorithm designed to mimic human thought, or something like that.</p>