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>
</template>
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:
Example.com
Box 564, Disneyland
USA

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
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)

&shy;

Similar to the wbr tag but ­ 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 10:00 to 21:00 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:

What’s your favorite fruit:

<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">
</datalist>
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:

Choose your fruit: OrangesGrapefruitsNectarinesPeaches

<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>
    <optgroup label="Stone fruit">
        <option value="nectarines">Nectarines</option>
        <option value="peaches">Peaches</option>
    </optgroup>
</select>
Code language: HTML, XML (xml)

Thats it!

With love and examples from w3schools.