HTML Tags that you might not know

In this article, let us see some of the awesome but rarely used HTML tags that could be helpful in your new projects.

1. <details> tag

The <details> tag is used to specify additional details that the user can open and close on demand. So this means that the user can hide or show some information behind a heading or some other element. So in essence it is used to create an interactive widget like thing that can be opened and closed on the user’s interaction. The widget that we create by default appears as closed. On opening, it expands and displays the content that is present within it..

We can add any sort of content within the <details> tag.

Let us see an example for same :

2. <bdo> tag

BDO stands for Bi-Directional Override.

The <bdo> tag is used to override the current text direction. The <bdo> tag takes dir attribute which is used to change the direction of the text before presenting it. The dir attribute can take two values – ltr and rtl. So if you want the text direction from left to right, then use the ltr value otherwise use the rtl value. This is also a required attribute and using it you can specify the text direction inside the <bdo> element. Let us see an example for same:

3. <abbr> tag

The <abbr> tag is used to define an abbreviation or an acronym like “ASAP” (as soon as possible), “HTML” (hyper text markup language)

Let us move to an example for same :

If you hover over the rendered content, then you will see a popup with the abbreviation of the enclosed text.

3. <kbd> tag

The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.

So this it for this article. Thanks for reading !