8 rare HTML tags you didn’t know existed

Here are 8 HTML tags you probably didn’t know. And I believe it’s a good idea to use some of the tags in your next project for a better User Experience and Google indexing.

<abbr> tag

The first is the <abbr> tag. The tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”. Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

For example:

CSS is a language that describes the style of an HTML document.
<abbr title="Cascading Style Sheets">CSS</abbr> is a language that describes the style of an <abbr title="HyperText Markup Language">HTML</abbr> document.
Code language: HTML, XML (xml)

<sup> tag

The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.

For example:

This text contains superscript text.

<p>This text contains <sup>superscript</sup> text.</p>
Code language: HTML, XML (xml)

<template> tag

The <template> tag is used as a container to hold some HTML content hidden from the user. The content inside <template> can be rendered later with a JavaScript.

See W3 Schools for a working example.

<template id="template">
  <div>Click me</div>
Code language: HTML, XML (xml)

<address> tag

The <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

For example:

Written by Jon Doe.
Visit us at:
Box 564, Disneyland
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Box 564, Disneyland<br>
Code language: HTML, XML (xml)

<wbr> tag

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break. When a word is too long, the browser might break it at the wrong place. You can use the <wbr> element to add word break opportunities.

For example:

This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongwordthatwillbreakatspecificplaceswhenthebrowserwindowisresized.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
Code language: HTML, XML (xml)


Similar to the wbr tag but &shy; will add hypens (dashes) between the text.

For example:

This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery­longwordthatwillbreakatspecific­placeswhenthebrowserwindowisresized.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery­longwordthatwillbreakatspecific­placeswhenthebrowserwindowisresized.</p>
Code language: HTML, XML (xml)

<time> tag

The <time> tag defines a specific time (or datetime).

For example:

Open from to every weekday.

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
Code language: HTML, XML (xml)

<datalist> tag

The <datalist> tag specifies a list of predefined option for an <input> element. It is used to provide an ‘autocomplete’ feature. Users will see a drop-down list of pre-defined options.

For example:

<label for="fruit">What's your favorite fruit:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
    <option value="Apple">
    <option value="Banana">
    <option value="Pear">
    <option value="Grape">
    <option value="Strawberry">
Code language: HTML, XML (xml)

<optgroup> tag

The <optgroup> tag is used to group related options in a <select> element (drop-down list). If you have a long list of options, groups of related options are easier to handle for a user.

For example:

<label for="fruit">Choose your fruit:</label>
<select name="fruit" id="fruit-cat">
    <optgroup label="Citrus">
        <option value="oranges">Oranges</option>
        <option value="grapefruits">Grapefruits</option>
    <optgroup label="Stone fruit">
        <option value="nectarines">Nectarines</option>
        <option value="peaches">Peaches</option>
Code language: HTML, XML (xml)

Thats it!

With love and examples from w3schools.

Leave your feedback and help us improve 🐶

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ☕️ or donating via PayPal 💰.

More free knowledge, because why not?

Your thoughts matter, leave a reply 💬

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