🔟Lesser-Used Yet Valuable HTML Tags👨‍💻

Introduction ✨

HTML is fundamental to our journey as developers, serving as a cornerstone since the beginning of our software development endeavors. Over time, native HTML has evolved alongside modern technology and browser advancements.

This article explores few of the very useful HTML tags that developers often overlook. Some of these tags have been introduced in recent years, offering innovative solutions to common challenges.

<picture>

This tag allows developers to specify multiple image sources based on device resolutions or screen sizes, offering enhanced control over responsive images compared to the traditional <img> element.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 767px)">
  <source srcset="image-large.jpg" media="(min-width: 768px)">
  <img src="image.jpg" alt="Description of image">
</picture>

<template>

With <template>, developers can define reusable HTML fragments that can be dynamically cloned and inserted into the document via JavaScript (One of the key aspects of Web Components). It simplifies client-side template creation without the need for string manipulation.

<template id="myTemplate">
  <p>This is a template content.</p>
</template>

<details> and <summary>

These tags enable developers to create collapsible content sections, where <summary> serves as a visible heading for the <details> element

<details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>

<dialog>

Representing a dialog box or modal window, <dialog> can be programmatically opened or closed via JavaScript within an HTML document.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<datalist> and <option>

These tags offer predefined options for elements with types "text" or "search", allowing users to select from the list or enter their own value.

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
  <option value="Safari">
</datalist>

<progress>

Used to represent the progress of tasks such as webpage loading, file uploads, or form submissions, <progress> can be dynamically updated using JavaScript.

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

<mark>

This tag is used to highlight or mark sections of text within a document. It is often used to indicate important or relevant content.

<p>This is <mark>highlighted</mark> text.</p>

<abbr>

This tag defines an abbreviation or acronym within a document. It can be used to provide explanations or expansions for abbreviated terms.

<p><abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>

Final Thoughts 🤔💡

These HTML elements, though less commonly used, offer valuable functionality for modern web development. While the prevalence of modern frontend tools and libraries may reduce their usage, it's beneficial to familiarize oneself with these native elements.

Feel free to share additional items for inclusion in the list by commenting below.

Thanks for reading. 🙌
Happy Coding! 🚀👨‍💻✨