Post
Ask Question

Rare Tags Of HTML 5

Introduction

 
Here, we will see how to implement a few more rare tags of HTML 5, like <kbd>, <legend>, <rel>, <meter>,  and <wbr>. 
 

<kbd>

 
The <kbd> tag is represented as keyboard input.  The content of this tag is displayed in same width size (monospaced font) in your browser.
 
<kbd> provides effective and attractive results, while we are using it, with CSS snippets.
 
Tag omission is allowed, opening tag is required, but closing tag is optional.
 
Example
  1. <html>  
  2. <head>  
  3. <title>Rare Tags:<kbd> </title>  
  4. <style>  
  5. kbd.key {  
  6.    padding: 1px 2px 0;  
  7.    border-radius: 3px;  
  8.    border: 1px solid #666;  
  9.    border-color: #990099;  
  10.    font-family: monospace;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15.    <p>Close the Window <kbd><kbd>Alt</kbd>+<kbd>F4</kbd></kbd>.</p>  
  16.    <p>Save your document or file <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">S</kbd></kbd>.  
  17.    </p>  
  18. </body>  
  19. </html>  
Output
 
Rare Tags Of HTML 5

<legend>

 
In our previous article, we already learned about <fieldset> element.  Here, the <legend> tag provides a caption to <fieldset> which plays a parental role for its contents.  In other words, we can say that a <fieldset> 's  primary child is <legend> element.
 
Tag omission is not allowed, both opening and closing tags are required to avoid errors.
 
Example
  1. <html>  
  2.    <head><title>Rare Tags:<legend> </title></head>  
  3.    <body>  
  4.       <fieldet>  
  5.          <legend>Spirit of radio</legend>  
  6.          <input type="radio" id="radio" name="radio">  
  7.          <label for="radio">Select option 1</label><br/>  
  8.          <input type="radio" id="radio2" name="radio">  
  9.          <label for="radio2">Select option 2</label><br/>  
  10.          <input type="radio" id="radio3" name="radio">  
  11.          <label for="radio3">Select option 3</label>  
  12.       </fieldset>  
  13.    </body>  
  14. </html>  
Output
 
Rare Tags Of HTML 5

<rel>

 
rel is not tag, but it is an attribute for <a> and <link> tags.
 
Syntax
 
<a rel= ”value”> or <link rel=”value”>
 
Here, attribute value should be any of the following, while we are using <a> tag,
 
alternate, author, bookmark, external, help, license, next, nofollow, noreffer, noopener, prev, search, tag
 
An attribute value should be any of the below list, while we are using <link> tag,
 
as, crossorigin, anonymous, use-credentials, disable, href, hreflang, importance, integrity, media, refferpolicy, rel, sizes, title, type, methods, prefetch, target, charset, rev
 
Example
  1. <html>  
  2.    <head>  
  3.       <title> Rare Tags: rel </title>  
  4.    </head>  
  5. <body>  
  6.    <p>  
  7.       <a rel="nofollow" href="http://www.google.com/">Search Engine</a>  
  8.    </p>  
  9. </body>  
  10. </html>  
Output
 
Rare Tags Of HTML 5
 

<meter>

 
The <meter> tag is new in HTML 5, which is used to define a scalar measurement of a known range or graphical explanation of fractional value.  Battery Level Charged, Temperature, Disk Usage, and Heat Level are the best examples of the <meter> element.
 
This element includes Global Attributes like: value, min, max, low, high, optimum, and form
 
Tag omission is not allowed, both opening and closing tags are required to avoid errors.
 
Note
The <meter> tag is not representing the progress like the <progress> tag. The <progress> element is used for progress bar.
 
Note
The <meter> tag is not supported in Internet Explorer, Edge 12, Safari 5 and previous versions.
 
Example
  1. <html>  
  2.    <head>  
  3.       <title>Rare Tags:<meter> </title>  
  4.    <style>  
  5.       label {  
  6.          padding-right: 20px;  
  7.          font-size: 1rem;  
  8.          }  
  9.    </style>  
  10. </head>  
  11. <body>  
  12.    <label for="temprature">temprature level:</label>  
  13.       <meter id="temprature"  
  14.          min="0" max="100"  
  15.          low="33" high="78" optimum="80"  
  16.          value="20">  
  17.          at 50/100  
  18.       </meter>  
  19.    </body>  
  20. </html>  
Output
 
Rare Tags Of HTML 5

<wbr>

 
The <wbr> is also a new element of HTML 5. This element is represented as Word-Break Opportunity.  It is used to optionally break text at a particular location.  We used <wbr> very occasionally.
 
When do we use <wbr>?
 
When your text is too long, or if you have any doubt the browser will break your lines at the wrong place, at the time you can use the <wbr> to add word break opportunities.
 
Note
<wbr> is not supported in Internet Explorer 11 or earlier versions.
 
Example
  1. <html>  
  2.    <head>  
  3.       <title>Rare Tags:<wbr> </title>  
  4.    </head>  
  5.    <body>  
  6.       <p>Try to restore the browser window, to view how the very long text in  
  7.          the paragraph below will break:</p>  
  8.       <p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longtextthatwillbreakatparticular<wbr>placeswhenthebrowserwindowisresized.</p>  
  9. </body>  
  10. </html>  
Output
 
Rare Tags Of HTML 5
 

Summary

 
In this article, we learned about rarely used tags in HTML 5, like <kbd>, <legend>, <rel>, <meter>, <wbr>.
 
References
 
https://www.w3schools.com/tags
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://www.w3docs.com/learn-html/html-elements.html


Similar Articles