Hey Readers 👋

Insha 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 reduce the complexity for you all.

HTML is a powerful markup language which can be used to give our web applications structure and provide powerful accessibility benefits,but only when used appropriately. In addition to that, it’s easy to learn and it has a lot of useful features that you can use as a Web developer. Here I’m going to show you some HTML uncommon elements.

1. Fieldset

• The <fieldset> tag in HTML5 is used to make a group of related form controls and labels.

• In browsers, a box around 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>Your address</legend>
        <label for="housenumber">House number:</label> <input type="number" name="housenumber" id="housenumber">
        <label for="street">Street:</label> <input name="street" id="street">
        <label for="postcode">Zip code / post code:</label> <input name="postcode" id="postcode">
    </fieldset>

    <input type="submit">

</form>

• Output:

  https://codepen.io/girl_whocode/pen/mdWygwR

As you can see, the tag <fieldset> groups the elements and it draws a border around them.

2. The Legend Tag

• The HTML <legend> element represents a caption for the content of its parent <fieldset>.

• The element should appear directly after the opening <fieldset> tag.

• Example

<fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="Alien " name="monster">
    <label for="Alien ">Alien </label><br/>

    <input type="radio" id="**Basilisk**" name="monster">
    <label for="Basilisk">Basilisk.</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
</fieldset>

• Output:

As you can see, the <legend> tag allows you to put a <fieldset> caption inside the border of the <fieldset> element. You can also add some CSS and make it look more appealing to the user.

3. Datalist

• <datalist> is an extremely useful yet an underrated tag in HTML.

• It is used to create a list of input options, predefined by the <input> tag. Initially, the options are hidden, and the list of them becomes available when the user starts typing.

• Example

<input list="ice-cream-flavors">
<datalist id="ice-cream-flavors">
  <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
  </datalist>

• The list attribute of the <input> tag must match the id of the <datalist> element.

• Output:

4. The progress tag

• The HTML <progress> element is used to represent the progress of a task.

• Attributes: The <progress> tag consists of two attributes which are listed below:

1. max :

• This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

2. value :

• This attribute specifies how much of the task that has been completed.

• Example:

<progress value="70" max="100">70 %</progress>

Output:

5. The Meter Tag

• HTML <meter> tag is used to measure data within a known range or a fractional value.

• To use the <meter> tag, you need to know the maximum value.

Check the Code and Output here:

Conclusion:

• So 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 😊