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.