6 uncommon but useful tags in HTML🚀

You might think that you know HTML at a good level and also think that there is not much to it than just making basic website’s structure with headings, paragraphs, links, images and containers.

But there are some tags in HTML which are really useful but are less known of. Knowing them can help you get things done without using JS.

1. Details and Summary — The details and summary tags help you create a dropdown template which you can be very useful in creating FAQs.

<details>
  This is shown everytime
  <summary>
    This is the hidden content.
  </summary>
</details>

2. Fieldset Tag — The fieldset tag creates a container over its child elements which can be named and styled to make it prettier.

<fieldset>
  <legend>Submission Form</legend>
  <form>
    <label for="name">Name</label>
    <input type="text" id="name" />
    <label for="email">Email</label>
    <input type="email" id="email" />
    <label for="password">Password</label>
    <input type="password" id="password" />
  </form>
</fieldset>

You can visit this page for looking at the examples — Useful but less known HTML tags (kamal-stark-dev.github.io)

3. Datalist Tag — datalist can be used to provide the autocomplete feature in an input tag. This gives a drop-down list while entering values.

<label for="data-lists">Select a Player</label>

<input type="text" list="data-list" id="data-lists" />
<datalist id="data-list">
  <option value="Cristiano Ronaldo"></option>
  <option value="Lionel Messi"></option>
  <option value="Kylian Mbappé"></option>
</datalist>

4. Dialog Tag — The dialog tag is used to create a dialog box which can be used for various purposes like showing a pop-up message to the user.

<dialog id="dialog-box">
  Hi, you are inside a dialog-box. To exit from here click on the close
  button.
  <button onclick="document.querySelector('#dialog-box').close()">
    Close
  </button>
</dialog>
<button onclick="document.querySelector('#dialog-box').showModal()">
  Open Dialog Box
</button>

5. Progress & Meter Tags — The progress & meter tags are useful in making some progress bars which can be used for loading something, uploading a file and download progress.

<p>Progress loading</p>
<progress></progress><br />
<p>Progress percentage</p>
<progress value="78" max="100"></progress> <br />
<p>Meter - Low, High & Optimum</p>
<meter
  value="27"
  max="100"
  min="0"
  low="30"
  high="60"
  optimum="80"
></meter>
<meter
  value="54"
  max="100"
  min="0"
  low="30"
  high="60"
  optimum="80"
></meter>
<meter
  value="89"
  max="100"
  min="0"
  low="30"
  high="60"
  optimum="80"
></meter>

6. KBD Tag — The kbd tag is useful for showing keyboard keys on the page and applying CSS on it to make them look like keyboard buttons.

Use <kbd>ctrl</kbd> + <kbd>Shift</kbd> + <kbd>i</kbd> to open the
developer tools.

I hope you got a good idea about these tags and their use cases. I have also created a page for better understanding — LINK.

If you like the content do follow for more and you can also suggest topics on which I should make more blogs on.

Thank you for reading, I’d love to read your feedback or any other useful tag in the comments.