10 rare HTML tags that nobody ever uses
![10 rare HTML tags that nobody ever uses](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F05%2Frare-html-tags.png&w=3840&q=75)
There’s way more to HTML than <div>
, <a>
, and <p>
.
So much more sophisticated and powerful tags that you’ve probably never used.
From modern list visualization to 🎨 colorful highlights, let’s look at 10 little-known but capable HTML tags.
1. abbr
The <abbr>
tag defines an abbreviation or acronym, like HTML, CSS, and JS.
And LOL too - though that's more of a standalone word these days.
I'm reading about
<abbr title="Hypertext Markup Language">HTML</abbr>
tags at
<abbr title="Coding Beauty">CB</abbr>
![The abbreviation is indicated with a dotted line by default.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage.png&w=3840&q=75)
We use the title
attribute of the <abbr>
tag to show the description of the abbreviation/acronym when you hover over the element:
Hover over <abbr>
to show the full form:
![Hovering over the <abbr> element.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-1.png&w=3840&q=75)
2. q
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:
![The text in the <q> tag is wrapped with quotation marks.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-2.png&w=3840&q=75)
3. s
<s>
strikes through.
To correct without destroying the change history.
Buy for <s>$200</s> $100
![Indicating price change with the <s> tag.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-3.png&w=3840&q=75)
The <del>
and <ins>
pair are similar but semantically meant for document updates instead of corrections.
<!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>
![Indicating editorial changes in a document with the <del> and <ins> tags.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-19.png&w=3840&q=75)
and
tags.4. mark
Marks or highlights text.
Coding <mark>Beauty</mark> Website
Yellow background color by default:
![The <mark> tag applies a bright yellow background to its enclosed text.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-4.png&w=3840&q=75)
Like how browsers show search results.
![Display search results for the letter "e" with the <mark> tag.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-5.png&w=3840&q=75)
5. wbr
<wbr>
tells browser, "You can only break text here and there"
So the browser doesn't get lousy and start break crucial words all over the place.
That's why it's wbr
-- Word BReak Opportunity
<p>this-is-a-very-long-text-created-to-test-the-wbr-tag</p>
![The text is broken at a location chosen by the browser.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-8.png&w=3840&q=75)
But now with <wbr />
<p>this-is-a-very-long-te<wbr />xt-created-to-test-the-wbr-tag</p>
Broken precisely after ...-te
:
![The text is broken at the location set with the <wbr> tag.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-7.png&w=3840&q=75)
6. details
<details>
is all about expanding and contracting -- like the universe.
<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>
Contract:
![A closed disclosure widget.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-9.png&w=3840&q=75)
Expand:
![An open disclosure widget.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-10.png&w=3840&q=75)
7. optgroup
The name says it all -- grouping options.
You can usually group gigantic option lists into clear hierarchies, and <outgroup>
is here to help.
<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>
Countries → continents.
![An open dropdown list contains grouped options.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-12.png&w=3840&q=75)
8. datalist
<datalist>
is all about making inputting text effortless.
With dropdown lists for autocomplete:
<form>
<label for="lang">Choose a language:</label>
<input list="langs" name="lang" id="lang" />
<!-- 🔗<input> list to <datalist> id -->
<datalist id="langs">
<option value="English" />
<option value="French" />
<option value="Spanish" />
<option value="Chinese" />
<option value="German" />
</datalist>
</form>
![An input with an available list of options.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-13.png&w=3840&q=75)
![An input with a responsive list of options.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-14.png&w=3840&q=75)
9. fieldset
A set of fields -- farmers must find it useful.
Creating a clean visual separation to easily understand the 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.
![Input elements, some grouped with a <fieldset> tag.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-20.png&w=3840&q=75)
10. sup and sub
<sup>
-- superscript.
<sub>
-- subscript.
<p>This text contains <sub>subscript</sub> text</p>
<p>This text contains <sup>superscript</sup> text</p>
![The text contains both subscript and superscript.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-16.png&w=3840&q=75)
Something more intense: neutralization reaction 🧪
𝑥<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
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fimage-21.png&w=3840&q=75)
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.
See also
- 10 rare HTML tags that nobody ever uses - Part 2
- 3 ways to show line breaks in HTML without ever using br
- 10 one-liners that change how you think about JavaScript
- 10 amazing tools that every web developer should know
- Recreate the Material Design text field with HTML, CSS, and JavaScript
- New HTML <dialog> tag: An absolute game changer