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)
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 π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!π
πΊπ
Data list Is a life saver...
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 ππ
So essentially it's a combobox?
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!ππ€Thanks for the reminder :), the progress element was something I had completely forgotten
You're welcome, Rumen! ππ I haven't actually utilized the native
<progress>
element in any of my projects!π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 :)
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. ππ
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.Certainly, Luke! The
<figure>
and<figcaption>
elements indeed form a valuable combination. I've used these elements very rarely myself! Thank you for highlighting ππI don't know how rare it is but I really love
<figcaption>
You're absolutely right!
<figcaption>
is really nice.ππI have reviewed the HTML code you shared, and it works perfectly. Thank you for sharing the HTML tags with all. @sudhil
You're welcome Mark! I'm glad to hear that the code worked well for you.π€ Thanks for the feedback! ππ
Hi Sudhil Raj K,
Excellent content, very useful.
Thanks for sharing.
Thank you so much for your kind words! I'm glad you found the content useful. Happy reading! ππ
Here are some more
Amazing! Thanks for sharingπ€π₯
Helpful
Thank you Sagar!π I'm delighted to hear that you found the information helpful!ππ