HTML Abbreviation <abbr> Element

By Christopher Kielty, updated Jan 14, 2019
tweet share email rss

Define abbreviations with <abbr title="emphasis">em</abbr>. The contents of title have semantic meaning and should contain the expansion or definition of the abbreviation. This is often rendered as a tooltip, although not always, and I'm not sure how mobile friendly this is. Also, some browsers might underline abbreviations or make other stylistic changes by default. Styling can be applied to abbr with CSS.

The title attribute is optional. It's ok to just use <abbr> to specify what is an abbreviation, which could then be styled. Don't forget to use the closing tag.

I like that <abbr> provides a place to put stuff outside of the paragraph, but I don't think this should be relied on by itself. I dunno how well the tooltip feature works in every browser, and also it can't be assumed that everyone is even going to look for tooltips. Nice to have, but if it's something that's unfamiliar, and maybe the first time it's being mentioned, I like to write out the definition in the paragraph.

If an abbreviation appears multiple times in one document, applying <abbr> tags to the first occurrence does not then automatically apply to every additional occurrence. In other words, defining an abbreviation in one place on the page does not define it everywhere else on that same page.

I haven't used this element very much yet, but that might change soon. I like tooltips.

See also Complete List of HTML Tags


tweet share email rss