Rare Html tags you should know

<ABBR>

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.

<SUP>

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 

<WBR>

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ßenbauprivatfinanzierungsgesetz</p>

<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>

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

</div>

<TIME>

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.

<ADDRESS>

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>

 <address>

<a href=”mai1to:[email protected] com” >[email protected] com </a><br>

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

 < /address>
Contact the author of this page:

[email protected]       

( 311) 555-238

<DATALIST>

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:

                                                                                                    Chocolate

                                                                                                         Coconut

                                                                                                         Mint

                                                                                                         Strawberry

                                                                                                          Vanilla

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

<option value=”Chocolate”>

<option value=”Coconut”>

<option value= “Mint”>

<option value=”Strawberry”>

<option value= “Vanilla”>

</datalist>

<OPTGROUP>

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>

  <option>Velociraptor</option>

  <option>Deinonychus</option>

  </optgroup>

  <optgroup label=”Sauropods”>

  <option>Diplodocus</option>

  <option>Saltasaurus</option>

  <option> Apatosaurus</option>

   </optgroup>

   < /select>

Choose a dinosaur:

Tyrannosaurus

Theropods

Tyrannosaurus

Velociraptor

Deinonychus

Sauropods

Diplodocus

Saltasaurus

Apatosaurus

<TEMPLATE>

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.

HTML

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

<template id=”template”>

<div>click me</div>

</template>

Leave a Reply

Your email address will not be published.