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