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.
1. Address(<address>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
2. Abbr(<abbr>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
3. Dialog(<dialog>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
4. Kbd(<kbd>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
5. Base(<base>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
6. Mark(<mark>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
7. Meter(<meter>)
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
Conclusion
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?
For the small applications, you may ignore the above tags, but for large applications, it becomes hard to maintain the documentation for each section. So using the Semantic tags or the tag that defines both the structure and meaning of the section is the best practice to follow. Semantic HTML reduces the burden of documentation and makes the codebase more readable, and improves the SEO of the application. Screen readers and ranking algorithms read the HTML structure of the web page. They don’t read stylesheets or JavaScript, so it is better to use Semantic elements. Just give it a try to above elements, it will be fun.
Also, in our upcoming blogs, we will update you with some more rare and useful HTML tags.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
