Sudhil Raj K

Posted on Feb 9

🔟Lesser-Used Yet Valuable HTML Tags👨‍💻

#html #webdev

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! 🚀👨‍💻✨

Top comments (25)

Thomas Bnt • Feb 10

Hello good HTML post ! I Liked!

Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');

Sudhil Raj K • Feb 10

Thank you for your positive feedback, Thomas! I'm glad you liked the post. I appreciate your suggestion,🙌 and I'll definitely consider adding colors to the code blocks in future posts. Anyway I have updated this one!😊

Thomas Bnt • Feb 10

🕺🎉

Mohammed Samgan Khan • Feb 9

Data list Is a life saver...

Sudhil Raj K • Feb 10

Absolutely dude! The <datalist> element is indeed a lifesaver when it comes to providing users with predefined options while still allowing them the flexibility to enter their own values. It's one of the more commonly utilized items from the list.
Thanks for reading 😊👍

Christopher Henderson • Feb 11

So essentially it's a combobox?

Sudhil Raj K • Feb 13

Yes, it's similar to a combobox as both offer predefined options with user input flexibility. However, the <datalist> element provides suggestions as users type and is integrated directly into the input field, creating a more seamless experience. Thanks for pointing out the connection, Christopher!😊🤝

Rumen Dimov • Feb 9

Thanks for the reminder :), the progress element was something I had completely forgotten

Sudhil Raj K • Feb 10

You're welcome, Rumen! 😊👍 I haven't actually utilized the native <progress> element in any of my projects!😃

Athreya aka Maneshwar • Feb 12

Good search might want to add GIFs after the code blocks, it'll make be a good addition to the reader, they don't have to read the whole content to understand. Try the ADEPT framework it works charmingly. There are many other such frameworks as well you can stick to any one. Keep up :)

Sudhil Raj K • Feb 13

Thank you for the suggestion, @lovestaco ! Adding GIFs after the code blocks sounds like a great way to enhance the reader's experience and understanding. Your feedback is much appreciated. 😊👍

Luke Inglis • Feb 10

Another one (kinda two) I like are the <figure> and <figcaption> elements. It’s ideal for when you have an image with semantic content, a code snippet, or a pull quote.

Sudhil Raj K • Feb 10

Certainly, Luke! The <figure> and <figcaption> elements indeed form a valuable combination. I've used these elements very rarely myself! Thank you for highlighting 🙌😊