5 Lesser Known HTML Tags

Introduction:

As we all know, HTML is the backbone of Website development, without which all the websites we know today would not even exist. Though HTML has a lot of tags, we use very few of them, e.g., <div>, <p>, <h1> to <h6>, <a> etc., In this article, we will explore 5 lesser-known HTML tags that you may not have heard of but can be useful in various situations.

The <abbr> Tag:

The first of the list is the abbreviation tag <abbr>. It can be very useful in situations where we need to express the abbreviation of a term. The <abbr> tag has an attribute named title which is used to show the description of the term when we hover the mouse over the word.

Example:

<abbr title="HyperText Markup Langugae">HTML</abbr> is the backbone of 
web development.

So, when the user hovers over the HTML word, the expansion will be shown to the user.

The <kdb> Tag:

The next tag on this list is the Keyboard Input tag <kdb>. This tag is used to display the keyboard input. This is useful when we are providing instructions to the user about the key combination to accomplish a task.

Example:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text
Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste text

The <dl> Tag:

The next on this list is the description list <dl> tag. This is used to create a list of terms and their corresponding definition. This is used in conjunction with the <dt> and <dd> tags, which are used to define the terms and the definition respectively.

Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language used to build interactive web applications</dd>
</dl>

The <meter> Tag:

The 4th tag in the list is the <meter> tag. This tag is used to represent a scalar measurement within a known range, such as the Battery percentage or the percentage of a task that has been completed.

Example:

<p>Battery charge: <meter value="75" min="0" max="100">75%</meter></p>

The <dfn> Tag:

The last tag in this list is the <dfn> tag. This tag is used to highlight the defining instance of a term in an HTML document. It is typically used to indicate the first or most important occurrence of a term in a document.

Example:

<p>A <dfn>blog</dfn> is a website where a person or organization publishes 
regular posts, typically consisting of text, images, and links.</p>

Conclusion:

In this article, we explored 5 tags: <abbr>, <kdb>, <dt>, <meter>, and <dfn>. These tags can help add semantic meaning to your content, improve the accessibility of your website, or simply add a little extra functionality. You can find the complete example in the CodePen below.

If you find this article useful, follow me for more such articles.

If you have any questions, Leave a comment below.

Thank you.