If you’re a web developer, probably you’re aware of the amount of HTML tags in the standard, there are about ~142 HTML tags and you most likely use ~10 of them for your projects.

I want to take this chance and show you 3 useful HTML tags that can make your project a bit better in terms of semantic.

<kbd />

This tag is capable of highlight shortcuts that you want to display to the reader, in a basic but noticeable way:


kbd tag example

<mark />

This one as the name suggests is for highlighting sections of text, of course, you can use CSS for styling it as you want:


mark tag example

<abbr />

This one is for display abbreviation with an optional attribute title that describes the content, the title is like a tooltip:


abbr tag example

These tags can help you improve your syntax and in a sense help you with the SEO; you could use simple div tags to visually create the experience for the user, but for some the web crawlers that represents different content.

Hope this helps you a bit in your upcoming projects.