DEV Community

Cover image for πŸ”ŸLesser-Used Yet Valuable HTML TagsπŸ‘¨β€πŸ’»
Sudhil Raj K
Sudhil Raj K

Posted on

πŸ”Ÿ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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

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!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
sudhil profile image
Sudhil Raj K

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!😊

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

πŸ•ΊπŸŽ‰

Collapse
 
msamgan profile image
Mohammed Samgan Khan

Data list Is a life saver...

Collapse
 
sudhil profile image
Sudhil Raj K

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 πŸ˜ŠπŸ‘

Collapse
 
cdhdeveloper profile image
Christopher Henderson

So essentially it's a combobox?

Thread Thread
 
sudhil profile image
Sudhil Raj K

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!😊🀝

Collapse
 
rumendimov profile image
Rumen Dimov

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

Collapse
 
sudhil profile image
Sudhil Raj K

You're welcome, Rumen! πŸ˜ŠπŸ‘ I haven't actually utilized the native <progress> element in any of my projects!πŸ˜ƒ

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

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 :)

Collapse
 
sudhil profile image
Sudhil Raj K

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. πŸ˜ŠπŸ‘

Collapse
 
ludamillion profile image
Luke Inglis

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.

Collapse
 
sudhil profile image
Sudhil Raj K

Certainly, Luke! The <figure> and <figcaption> elements indeed form a valuable combination. I've used these elements very rarely myself! Thank you for highlighting πŸ™ŒπŸ˜Š

Collapse
 
jsspen profile image
Jordan Spencer

I don't know how rare it is but I really love <figcaption>

Collapse
 
sudhil profile image
Sudhil Raj K

You're absolutely right! <figcaption> is really nice.πŸ™ŒπŸ˜Š

Collapse
 
marksmith991 profile image
Mark Smith • Edited

I have reviewed the HTML code you shared, and it works perfectly. Thank you for sharing the HTML tags with all. @sudhil

Collapse
 
sudhil profile image
Sudhil Raj K

You're welcome Mark! I'm glad to hear that the code worked well for you.🀝 Thanks for the feedback! πŸ˜ŠπŸ‘

Collapse
 
jangelodev profile image
JoΓ£o Angelo

Hi Sudhil Raj K,
Excellent content, very useful.
Thanks for sharing.

Collapse
 
sudhil profile image
Sudhil Raj K

Thank you so much for your kind words! I'm glad you found the content useful. Happy reading! πŸ™πŸ˜Š

Collapse
 
efpage profile image
Eckehard

Here are some more

Collapse
 
sudhil profile image
Sudhil Raj K

Amazing! Thanks for sharing🀝πŸ”₯

Collapse
 
isagarjaiswal profile image
Sagar Jaiswal

Helpful

Collapse
 
sudhil profile image
Sudhil Raj K

Thank you Sagar!πŸ™Œ I'm delighted to hear that you found the information helpful!πŸ˜ŠπŸ‘