The most Uncommon HTML5 Tags you should know!

Priyanshu Kumawat's photo
Priyanshu Kumawat
Β·Dec 10, 2021Β·

3 min read

The most Uncommon HTML5 Tags you should know!

Photo by Firos nv on Unsplash

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Hey Readers, πŸ‘‹

Priyanshu here. I'm a self-taught web developer.

Web development is an interesting yet challenging approach so here I'm sharing my bit of knowledge to abate complexity for you all.

HTML is the standard markup language for documents designed to be displayed in a web browser. It provides powerfull accessibility functions if used appropriately and Also can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. In addition to this, it's easy to learn and has a lots of features that you can use as Web developer. Here, I'm going to show you some of the most Uncommon HTML tags. πŸ˜€

1. Abbreviation :

  • The <abbr> tag in HTML5 is the latest title.
  • When the mouse curser is hovered on the title, it will display a full description in the tooltip form.
  • This element includes Global Attribute like: title.

  • Example :

         <p> The most wonder key of your development is
    <abbr title="Self Reflection is kind of self Questioning or self talk">
    Self Reflection</abbr></p>
    
    • Output :

2. Acronym:

  • The <acronym> is another abbreviation tag
  • In HTML5 <acronym> is not supported. In case we use the <abbr> tag
  • The <acronym> tag is compatible in any browser as well as it is used to abbreviate the full form of the title whixh is placed between these tags when hovered.

  • Example :

     <p> The <acronym title="world wide web">www</acronym>
 is only a component of Internet
    </p>
  • Output :

3. Address :

  • The <address> tag basically provides contact information regarding author or owner of the organisation or documets or an article.
  • The <address> tag always returns the value Italics.

  • Example :

    <address>
    <a href="mailto:username@gmail.com">username@gmail.com</a><br>
    <a href="tel:+442030xxxxxx">(203) 0xx-xxxx</a>
    </address>
    
  • Output :

4. Cite :

  • The <cite> tag is the citation element of HTML.
  • Citation is the term which means a quotation from or reference to a book, paper, or author, especially in a scholarly work.
  • As all of use know about the <blockquote>, it’s just similar to it.
  • When we want to give italics expression,we can use this alternative.
  • Example :

    <blockquote>    
       <p>" Only you built your Limits "</p>    
    <footer>    
          Example <cite>Rare Tags: Cite </a></cite>by Priyanshu 
    </footer>    
    </blockquote> 
     <p>For More details visit us: <cite> HTML E-Learns</cite>.</p>
    
  • Output :

5. Optgroup :

  • When we are using <SELECT> tag, at that time, to put proper options to the selection box, <optgroup> tag is used in HTML5.

    • This element includes Global Attributes like: disable and label.
  • Tag omission is allowed. Closing tag is optional.

  • Examples :

<label for="communitysite">Community Site:</label>    
  <select id="communitysite" name="communitysite">
       <optgroup label="Saturday"></optgroup>
       <option value="insta">Instagram</option>
       <option value="fb">Facebook</option>
       <option value="pin">Pinterest</option>
      <optgroup label="Monday"></optgroup>
     <option value="csharpcorner">C-Sharp Corner</option>
     <option value="git">GitHub</option>
 </select>
  • Output :

6. Fieldset :

  • The <fieldset> in HTML5 is used to make a group related form controls and labels.
  • In browsers, a box aroun the content is drawn.

  • Example :

<form action="fieldsetdemo/">

    <fieldset>
       <legend>Personal details</legend>
       <label for="yourname">Your name : </label><input name="yourname" id="yourname">
        <label for="yourage">Your age :</label> <input type="number" name="yourage" id="yourage">
     </fieldset>

     <fieldset>
         <legend>House address</label>
         <label for="housenumber">House number : </label> <input name="housenumber" type="number" id="housenumber">
        <label for="street">Street : </label> <input name="street" id="street">
        <label for="postcode">Zip code / Post code : </label> <input id="postcode" name="postcode">
     </fieldset>
   <input type="submit">

</form>
  • Output :

Conclusion:

  • We covered some Underrated yet powerful HTML tags that you should know.
  • I hope you find it useful. If yes then let me know in the comments.
  • Also if you want more useful content related to web development follow me on Twitter.
  • Thanks for Reading ☺️.

You can extend your Support by Buying me a coffee here.🌴 yellow-button.png

Published on: 12/10/2021

Did you find this article valuable?

Support Priyanshu Kumawat by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this

Impressum

Featured on Tech Blogs