HTML abbr Tag

Code Tidbit by SamanthaMing.com

Semantic HTML is a great way to convey meaning of your page. Mark up abbreviated content with the <abbr> tag. And when you pass a title, it will create a tooltip when hovered over. Nice! 👏

<abbr title="Today I learned">TIL</abbr> something awesome!

Table of Content

− Default Styling
− Styling abbr Tag
− Battle between abbr VS acronym ⚔️
− Mixing abbr with dfn
− Why Semantic HTML is important
− Display HTML abbr on Mobile
−− Solution 1: Display Non-abbreviated Term
−− Solution 2: Display Non-abbreviated Term with Tap
−− Solution 3: JavaScript Tooltip
− Browser Support
− Resources

Default Styling

The default styling of <abbr> varies a bit from different browsers. In Chrome and Firefox, it will have an underline and when hovered it will a tooltip of the title value you passed.

Text of “TIL” being displayed as underlined

If you open this page on Safari, there will be no underline. Also, the…