Rare Html tags you should know


The <abbr> tag defines an abbreviation or an acronym, like ” HTML”, “CSS,”Mr”., “ASAP”,etc.

Tip: Use the global title attribute to show the description for the abbreviation/ acronym when you mouse over an element.

<p>You can use <abbr title=“Cascading Style Sheets”> CSS</abbr>  to style your

<abbr title=“HyperText Markup Language“>HTML</abbr></p>

You can use CSS to style your HTML.


The <sup> tag defines superscript text. Superscript text appears half a character above the normal line,

and is sometimes rendered in a smaller font.

Tip: Use th is tag to define subscript text.

<p>The <b>Pythagorean theorem</b> is often expressed as the following equation:</p>

<p><var>a<sup>2</sup></var> + <var>b<sup> 2</sup></var> =<var>c<sup>2</sup></var></p>

The Pythagorean theorem is often expressed as the following equation:

a2 + b2 = c2 


The <wbr> (Word Break Opportunity) tag specifies where in a text it would be OK to add a line break.

Tip: When a word is too long you can use this element to add

<div id=”example-paragraphs”>



<p>Fernstraßen &shy; bau shy; privat &shy; finanzierung &shy; gesetz</p>



The <time> tag is used to define time in a document.

<p>The Cure will be celebrating their 40th anniversary on <time datetime=“2018-07-07”>July 7</time>

in London’s Hyde  Park.</p>

<p>The concert starts at < time datetime = “20: 00 ” > 20:00 </time> and you’11  be able to

enjoy the band for at least< time datetime = “PT2H3M” > 2h 30m</time>.</p>

The Cure will be celebrating their 40th anniversary on July 7 in  London’s Hyde Park.


The <address> tag defines the contact information for the owner of a document. 

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

<p>Contact the author of this page:</p>


<a href=”mai1to:jim@rock com” >jim@rock. com </a><br>

 <a href=”tel:+13115552368”>( 311) 555-2368</a>

 < /address>
Contact the author of this page:


( 311) 555-238


The <datalist> tag specifies a list of pre- defined options for an <input> element. It is used to

provide an “autocomplete” feature. Users will see a drop-down list of predefined options.

<label for=”ice-cream-choice “> Choose a flavor:</label>

<input list=”ice-cream-flavors” id=”ice-cream-choice” name=”ice-cream-choice” />

Choose a flavor:






<datalist id=”ice-cream-flavors”>

<option value=”Chocolate”>

<option value=”Coconut”>

<option value= “Mint”>

<option value=”Strawberry”>

<option value= “Vanilla”>



The <optgroup> tag is used to group related options in a <select> element  (drop down list).

Tip: If you have a long list of options, groups of related options are easier to handle for a user.

<label for=”dino-select”>Choose a dinosaur: </label>

 <select id-“dino-select”>

 <optgroup label=”Theropods “>

  <option> Tyrannosaurus</option>




  <optgroup label=”Sauropods”>



  <option> Apatosaurus</option>


   < /select>

Choose a dinosaur:











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  JavaScript.


<div id=”container “></div>

<template id=”template”>

<div>click me</div>


Leave a Reply

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