HTML abbr Tag
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.
If you open this page on Safari, there will be no underline. Also, the…
