Uncovering the Hidden Gems of HTML - Discovering lesser known HTML tags

HTML is a fundamental part of web development. As technology advances using HTML tags is becoming more and more important. But some of the tags are not well known and don't get used much. In this post, we'll talk about some of those lesser-known tags that could be helpful for your website projects.

1. Fieldset:
   The fieldset tag is used to group related elements in a form. The legend tag is used to provide a caption for the fieldset. Here is an example:

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
  </fieldset>
</form>

Output:

1. Summary:
   The <summary> tag is used in conjunction with the <details> tag to create an expandable and collapsible section of content. The content inside the <summary> tag is the heading of the section, and the content inside the <details> tag is the body of the section.

<details>
  <summary>Click here to see the answer</summary>
  <p>The capital of France is Paris.</p>
</details>

Output:

1. Address:
   The <address> tag is used to indicate the contact information for the persons of a document or the owner of a website. It can include the person's name, address, phone number, and email address.

    <address>
      Nitesh Singh<br>
      123 Main St.<br>
      UK, London<br>
      Phone: 999-999-999<br>
      Email: niteshs.rajput786@gmail.com
    </address>
   

Output:

1. Picture:
   The picture tag is used to provide multiple sources for an image based on different conditions, such as screen resolution or device orientation. Here is an example:

    <picture>
      <source media="(max-width: 600px)" srcset="https://www.w3schools.com/images/lamp.jpg">
      <source media="(max-width: 1200px)" srcset="https://www.w3schools.com/images/lamp.jpg">
      <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
    </picture>
   

   Output:

   

2. Datalist:
   The datalist tag is used to provide a list of pre-defined options for an input field. Here is an example:

    <label for="browser">Choose a browser:</label>
    <input type="text" id="browser" list="browsers">
   
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Safari">
      <option value="Opera">
    </datalist>
   

   Output:

   

3. Progress:
   The <progress> tag is used to display the progress of a task or operation. It is typically used to display a progress bar that indicates the completion percentage of a task. The <progress> tag has two required attributes: value and max, which specify the current value and maximum value of the task, respectively.

    <p>Uploading file: <progress value="50" max="100">50%</progress></p>
   

   Output:

   

4. Time:
   The <time> tag is used to define a date and/or time in a machine-readable format. It is typically used to indicate the time and date of an event.

    <p>The last time this page was updated was on <time datetime="2023-03-26T10:15:00-07:00">March 26, 2023 at 10:15 AM PST</time>.</p>
   

   Output: