Yogesh Chauhan's Blog

Useful (and probably ignored) HTML tags: Part 1

in HTML on July 21, 2021


The abbr tag is used for abbreviation / acronym.

You can use abbr with title attribute or dfn tag to show the description for the abbreviation.

The description will be displayed when an user hovers mouse over the abbreviated text.


The address tag is used to show contact information for the author of an article.

The texts will be displayed in italic.


The area tag is used to specify an area inside an image. You can make areas clickable in an image using area tag.

You have to nest area inside a map tag.

<img loading="lazy" src="image.jpg" alt="image" usemap="#map" width="200" height="200">

<map name="map">
  <area shape="circle" coords="350,200,22" alt="" href="">

To generate coords for area tag, you can use this gimp docs.


This tag is really handy when you want to have a same base target URL for all links on a page. On anchor tags, you can just specify the relative URL rather than full URL.

An html document MUST not have more than one base tag in it and the base tag needs to be inside a head tag.


The bdi tag is used to stops a particular texts from formatting itself into a different direction.

This tag is helpful while working with multiple languages texts on the same page since some of those languages requires the texts to start from right while others will requires the texts to start from left.

In that case, it will create a chaotic page. To stop that, use bdi tag to keep one direction for all texts, no matter the language.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What Is a Graph Database?MiscellaneousHow to install Gulp with WordPress?WordPressHow to get the height and width of an element using JavaScript?JavaScriptHow to add Read More Read Less Button using JavaScript?JavaScriptIs there a CSS parent selector?CSSPagination in CSS with multiple examplesCSS