When you first learned HTML, you were likely introduced to the most common tags that are used in many websites and sufficient for the vast majority of scenarios. Surely every web developer has heard of ubiquitous tags like <html>, <body>, <p>, <a> and of course, <div>.
Similar to programming languages, however, there is more to HTML than just the basics. Apart from these famous tags, there are a number of rare tags that are pretty useful for more advanced and specific use cases, despite their low popularity.
It would be good for us to increase our HTML knowledge by learning about these rarely used tags, we’ll be going through 10 of them in this article.
1. The <abbr> tag
The <abbr> tag defines an abbreviation or acronym, like HTML, CSS, PHP, JS, CS, CB, etc.
I'm reading about
<abbr title="Hypertext Markup Language">HTML</abbr>
tags at
<abbr title="Coding Beauty">CB</abbr>
We use the title attribute of the <abbr> tag to show the description of the abbreviation/acronym when you hover over the element:
<abbr> element.2. The <q> tag
The <q> tag indicates that the text inside of it is a short inline quotation.
<q>Coding creates informative tutorials on Web Development technologies</q>Modern browsers typically implement this tag by wrapping the enclosed text in quotation marks:
3. The <s> tag
We use the <s> tag to render text with a line through it (a strikethrough). This is useful for representing things that are no longer relevant or accurate.
Buy for <s>$200</s> $100
<s> tag.Similar to <s> is the <del> tag, which also renders strikethrough text, but is meant to be used with the <ins> tag to indicate editorial changes in an already published document.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
del {
background-color: lightsalmon;
}
ins {
text-decoration: none;
background-color: lightgreen;
}
</style>
</head>
<body>
My favorite programming language is <del>JavaScript</del>
<ins>TypeScript</ins>
</body>
</html>
<del> and <ins> tags.4. The <mark> tag
We use the <mark> tag to define text that should be marked or highlighted.
Coding <mark>Beauty</mark> WebsiteBy default, <mark> applies a bright yellow background to the enclosed text:
This tag is useful for highlighting text search results in a document like many browsers do when you use the Find on Page tool.
<mark> tag.5. The <wbr> tag
The <wbr> (Word Break Opportunity) tag defines certain positions in a text where it would be okay for a line break to be added.
When text is wrapped in the browser, the words at the end of the wrapping might be too long and get broken in the wrong place.
<p>this-is-a-very-long-text-created-to-test-the-wbr-tag</p>
After shrinking the browser window, the text above was wrapped and broken at a point chosen by the browser, which might not be what we want.
With the <wbr> tag we specify the exact locations in the word where it would be okay for it to get broken.
<p>this-is-a-very-long-te<wbr />xt-created-to-test-the-wbr-tag</p>
<wbr> tag.6. The <details> tag
With the <details> tag, we can specify additional details on the web page in a disclosure widget that the user can view or hide when they want.
<details>
<summary>Lorem Ipsum</summary>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos
quod fugiat quasi repudiandae, minus quae facere. Sed, quia? Quod
cupiditate asperiores neque iste consectetur tempore eum repellat incidunt
qui.
</details>
7. The <optgroup> tag
The <optgroup> tag groups related options in a <select> element. This can make it easier for users to understand their choices when the options list is long.
<select name="country" id="countries">
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
</optgroup>
</select>Here we group the countries in the list according to their continents.
8. The <datalist> tag
We use the <datalist> element to specify a list of pre-defined options for an <input> element. It contains a set of <option> elements that represent the recommended or allowed options that the user can pick from.
<form>
<label for="lang">Choose a language:</label>
<input list="langs" name="lang" id="lang" />
<datalist id="langs">
<option value="English" />
<option value="French" />
<option value="Spanish" />
<option value="Chinese" />
<option value="German" />
</datalist>
</form>To link an <input> element with a <datalist> element, we set an id attribute on the <datalist> and set the list attribute of the <input> to this same id.
9. The <fieldset> tag
The <fieldset> element is used to group multiple related elements in a form. The visual separation this element provides can make it easier for users to understand your forms.
<form>
<fieldset>
<legend>Name</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" /><br />
<label for="mname">Middle Name:</label>
<input type="text" id="mname" name="mname" /><br />
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" />
</fieldset>
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>We use the <legend> tag to define a caption for the <fieldset> element.
10. The <sup> and <sub> tags
We use the <sup> tag to define text that should be displayed as a superscript. A superscript text usually appears half a character above the normal line and has a smaller font.
On the other hand, a subscript text appears half a character below the normal line. It also has a smaller font, and we use the <sub> tag to display it.
<p>This text contains <sub>subscript</sub> text</p>
<p>This text contains <sup>superscript</sup> text</p>
Here’s a more practical example:
𝑥<sup>2</sup> - 3𝑥 - 28 = 0. Solve for 𝑥. <br />
<br />
H<sub>2</sub>SO<sub>4</sub> + NaOH → Na<sub>2</sub>SO<sub>4</sub> +
H<sub>2</sub>O
Conclusion
In this article, we explored some of the least known and utilized tags in HTML. These rare tags can be quite useful in particular situations despite their low usage.
Nice work!