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.
2
Answers
The closest thing for that is the
<abbr>
element, which "represents an abbreviation or acronym" according to MDN. Thetitle
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.
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.I think the details summary can help you as well, here is an example:
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