Is there semantic HTML for clarifying meaning of acronyms? [duplicate]

Question

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.

Cuckoo

All of your examples indeed revolve around abbreviations, but note that for a real "definition" semantic, you'd use <dfn> – Franci

After learning of these tags, I immediately noticed they affect the appearance of HTML content, and wanted to find out how to style them. I'm guessing others will also be curious, so: the default dotted underline on <abbr> can be removed with text-decoration: none; (Source) and the default italics on <dfn> can be removed with font-style: normal;. (Source) Consider whether visual differentiation could benefit users, or if your tags are mostly just to aid content parsing algorithms. – Cuckoo

Did you read the descriptions of the current HTML elements before asking this? That would have been the best place to start before asking Stack Overflow. – Washboard

Note that, semantically, it's an almost universal rule to spell out your acronyms on a page or in a corpus the first time you use that acronym. You can then follow it with a parenthetical that includes the acronym. After that, you can refer to the acronym only. Any meta-data method of identifying the full, unabbreviated value of an acronym should only be used in addition to this, not instead of, this method. – Rutland

Answer 1

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>

Marrilee

Thanks! I see there is also a <dfn> tag that can be used in conjunction with the <abbr> tag. This will prove useful! (Not sure why it's not currently listed with the other semantic tags) I'll accept your answer when I am able to... in 2 min. lol – Cuckoo

@Cuckoo Just a pointer, but MDN's documentation is generally better than w3schools in absolutely every way, here's their element reference list – Steinway

Answer 2

I think the details summary can help you as well, here is an example:

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

you can find the details about it on this webiste: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

As a side note you might rely on the MDN docs for other semantic HTMLs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Liebman

That is definitely not what the OP is looking for. This is more of a use for an accordion. It is no use to be used as inline text that should give extra information for screen readers or other assistive technology – Hocker

Thanks for letting me know, I just thought to add it as an extra use case and pointed to MDN for extra details since they have better information. – Liebman