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:
<abbr title="Cascading Style Sheets">CSS</abbr> is a language that describes the style of an <abbr title="HyperText Markup Language">HTML</abbr> document.
<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>
<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>
<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>
<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 veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
­
Similar to the wbr tag but ­
will add hypens (dashes) between the text.
For example:
This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongwordthatwillbreakatspecificplaceswhenthebrowserwindowisresized.
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery­longwordthatwillbreakatspecific­placeswhenthebrowserwindowisresized.</p>
<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>
<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">
</datalist>
<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>
<optgroup label="Stone fruit">
<option value="nectarines">Nectarines</option>
<option value="peaches">Peaches</option>
</optgroup>
</select>
Thats it!
With love and examples from w3schools.
Support 🐶
If you found this article helpful, got a question or spotted an error/typo... Do well to leave your feedback in the comment section or help spread it by sharing this article. If you're feeling generous (and I hope you do) you can definitely help me by getting me a cup of coffee ☕.
Leave a Reply