HTML is usually the first language most web developers learn. But it’s not possible to know all the tags the language offers. As a result of this, we are not able to utilize the full potential of some rare and useful HTML tags.
Since semantic HTML has become common, so many new tags are introduced. But we usually stick to the common ones like <nav>, <header>, <footer> and many more. So here in this blog, we will cover 8 rare and useful HTML tags that I think developers probably don’t know, to help you discover the power of some under-used tags.
The <address> tag defines the contact information of the organization or person or the author of an article. The contact information can be anything; it can be the address, phone number, email, or website URL.
The text inside the <address> tag is displayed in italics by the browser.
The <abbr> tag defines the abbreviation in the HTML. It also provides the optional title attribute to describe or expand the abbreviation or acronym when the mouse cursor is hovered over the text inside the tag.
The title attribute has special semantic meaning and should only contain the full human-readable expansion of abbreviation.
The <dialog> tag defines the dialog box or other components like subwindow, alert. This tag makes it easy to create dialog boxes and modals with the help of an open attribute.
The open attribute indicates that the dialog is active and user can interact with it. And if it is not defined, the dialog should not be shown to the user.
The <kbd> tag defines the textual user input from the keyboard, voice input, or any other textual input. The text inside the <kbd> tag is displayed in the default monospace font. However, it is not mandatory. It supports global attributes.
The <base> tag specifies the base URL and target for all the relative URLs in a document. It must be defined within the <head> element, and there can be only one base element in a document.
The <base> tag should have either href or target attribute, or both.
i. Href: The base URL should use throughout the document for the relative document.
ii. Target: It is the keyword of the default browsing context to show the result of the navigation from the <a>, <form>, and many more tags without the use of explicit target attributes.
The <mark> tag defines the text that should be marked or highlighted to show the importance. This tag should not be confused with the <strong> tag. As <strong> tag indicates the span of the text of importance while <mark> tag denotes content with a degree of relevance.
By default, the browsers display the mark element with a yellow background color.
The <meter> tag defines the scalar measurement within the fractional or known range.
Example: disk usage, query result relevancy, etc.
Meter elements have the following attributes:
i. Value: Refers to the current numeric value. Must lie between the min and max value.
ii. Min: It is the lower numeric bound of the measured range. Must be less than the maximum value if mentioned.
iii. Max: It is the upper numeric bound of the measured range. Must be greater than the minimum value if mentioned.
iv. Low: Refers to the upper numeric bound of the low-end measured range.
v. High: Refers to the lower numeric bound of the high-end measured range.
vi. Optimum: Indicates the optimal numeric range.
8. Ins and Del(<ins> and <del>)
The <ins> tag defines the text inserted into the document, while the <del> tag defines the text that has been deleted from the document.
By default, the browser displays the inserted element with the underline and deleted element with the strike line through a deleted text.
I think you may wonder if the same functionality is achieved from the basic tags like div, nav, footer, and more, then what is the need for the above ones?
Also, in our upcoming blogs, we will update you with some more rare and useful HTML tags.