10 Rare HTML Tags Nobody Uses

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>
The abbreviation is indicated with a dotted line by default.
The abbreviation is indicated with a dotted line by default.

We use the title attribute of the <abbr> tag to show the description of the abbreviation/acronym when you hover over the element:

Hovering over the <abbr> element.
Hovering over an <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:

The text in the <q> tag is wrapped with 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
Indicating price change with the <s> tag.
Indicating price change with the <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>
Indicating editorial changes in a document with the <del> and <ins> tags.
Indicating editorial changes in a document with the <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> Website

By default, <mark> applies a bright yellow background to the enclosed text:

The <mark> tag applies a bright yellow background to its 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.

Display search results for the letter "e" with the <mark> tag.
Displaying search results for the letter “e” with the <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>
The text is broken at a location chosen by the browser.
The text is broken at a location chosen by the browser.

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>
The text is broken at the location set with the <wbr> tag.
The text is broken at the location set with the <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>
A closed disclosure widget.
The disclosure widget is closed (default state).
An open disclosure widget.
The disclosure widget is open.

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.

An open dropdown list contains grouped options.

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.

An input with an available list of options.
A list of available options for the input is displayed in a dropdown list.
An input with a responsive list of options.
The available options change according to what the user types in the input.

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.

Input elements, some grouped with a <fieldset> tag.

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>
The text contains both subscript and superscript.

Here’s a more practical example:

&#x1D465;<sup>2</sup> - 3&#x1D465; - 28 = 0. Solve for &#x1D465;. <br />
<br />
H<sub>2</sub>SO<sub>4</sub> + NaOH &#8594; 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.



1 thought on “10 Rare HTML Tags Nobody Uses”

Leave a Comment

Your email address will not be published. Required fields are marked *