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.

#html