Top 5 HTML Features You’re Not Using (But Should Be)

HTML is the foundation of web development. While most developers are familiar with the basic elements like

<div>, <p>, and <img>,

HTML offers a plethora of advanced features that can significantly enhance the functionality and efficiency of your web pages. Unfortunately, many of these powerful features remain underutilized. In this article, we’ll explore the top 5 HTML features you’re probably not using but definitely should be.

1. Dialog Element

The element is a native HTML element that allows you to create modal dialogs without relying on JavaScript libraries. It can be used for alerts, confirmation dialogs, or custom pop-ups, offering a more semantic approach to modals.

Here’s an example:

<dialog id="myDialog">
    <p>This is a modal dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

With the element, you can easily control the opening and closing of modals, and it’s also accessible and easy to style.

2. Picture Element

The element is essential for creating responsive images that adapt to different screen sizes and resolutions. It allows you to specify multiple image sources and choose the best one based on the device’s capabilities.

Here’s an example:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

The element improves load times and enhances the user experience by serving the most appropriate image for each device.

3. Output Element

The element is designed to display the result of a calculation or user interaction. It’s especially useful in forms where you want to show real-time feedback based on user input.

Here’s an example:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

This element is a simple way to create interactive and dynamic forms without requiring extensive JavaScript.

4. Data Element

The element associates a machine-readable value with its human-readable counterpart. It’s particularly useful for adding semantic meaning to your content, like linking a product ID to its display name.

Here’s an example:

<p>Price: <data value="49.99">$49.99</data></p>

Search engines and web crawlers can use this additional information to understand your content better, which could improve your SEO performance.

5. Details and Summary Elements

The and elements work together to create expandable content sections. This feature is perfect for creating FAQs, collapsible content, or any scenario where you want to hide and reveal information.

Here’s an example:

<details>
    <summary>More Information</summary>
    <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>

These elements are easy to implement and provide a better user experience by reducing the amount of information displayed at once, keeping your pages clean and readable.

Conclusion

HTML has evolved significantly, and these features demonstrate just how powerful and flexible it has become. By incorporating these lesser-known elements into your projects, you can create more responsive, dynamic, and user-friendly web pages with less reliance on external libraries and frameworks. So, give these HTML features a try—you might be surprised at how much they can enhance your development process.

That's all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 29512! 🤗

Comments

[𒎏Wii 🏳️‍⚧️]

Dialogue elements are cool in theory, but I've always found them a bit inconvenient to style in practice. There's no way for the CSS to query how they're being shown, so without weird hacks, getting them to play nicely with both show() and showModal() is a bit of a pain.

EDIT: After a bit more digging, I figured out that :modal is a thing now, so that should (hopefully) make using dialogues a lot more doable than I remember. Now all it's missing is an open event.

[Jon Randy 🎖️]

Just use a MutationObserver on the open attribute?

[𒎏Wii 🏳️‍⚧️]

That should just be a built-in feature though. It's not like we couldn't already build your own pop-over dialogues before <dialog>, but the point is to provide that out of the box.

[Tomas Stveracek]

Great article! Another cool feature to explore is the <template> tag. It lets you define reusable HTML that you can add to the DOM later with JavaScript, without rendering it right away. Perfect for dynamic content.

[Jon Randy 🎖️]

Might want to proofread this 👍

[Safdar Ali]

Sure Jon you can definitedly do that!! I'll be happy if you read my blog.

[Jon Randy 🎖️]

Well, all the tags you've added are invisible - making the post essentially unreadable

EDIT: I see you've fixed it 👍

[Safdar Ali]

Thank s for your feedback!

[Martin Baun]

Jeez, HTML has some good features, but sometimes they can be ugly and difficult to style! Great piece regardless, thanks for this!

[Safdar Ali]

Great to hear that! Do subscribe my YouTube Channel

[Soumya Ranjan 🎖️]

I have Just created an account and read this, It was my first reading 😂😂

[Safdar Ali]

Glad to hear that❤. Do subscribe my YouTube Channel

[roshan khan]

that dialouge feature was really helpful to give a popup when a user exits my website

[Safdar Ali]

Great to hear that! Do subscribe my YouTube Channel

[Sanwal Mumtaz]

Great job Mr Safdar👌

[Safdar Ali]

Thanks Sanwal❤

[Gergely Mészáros]

also, the interface can be much cleaner now. You don't have to type some obscure mess like document.getElementById('myDialog').showModal() , just write myDialog.showModal().
also, dialog elements can be closed by simply set the inner form method to "dialog" by using the method or the form-element's formmethod prop. So you can do something like this:
<dialog id="mydialog">
<form method="dialog">
complex form here...
<button id="ok" >OK</button>
</form>
</dialog>

no boilerplate needed.

[Safdar Ali]

Subscribe to my YouTube Channel if you find it helpful! Subscribing is free, and it will motivate me to stay active here. 😊

[Dan Jones]

In my opinion, the <data> element is pretty useless.

It's poorly defined. It doesn't have any way of declaring what the value means in that context. So, web crawlers can't parse any useful information from them.

It could be useful if you want someone to scrape data from your site, if you have documented somewhere what the value means. But, if you want to make your data available, just make an API; don't make people scrape your site.

There is a related tag, though, that's better defined and much more useful: the <time> tag.

[Jerom Fernando]

Thank you for the post <3

[Safdar Ali]

Glad to hear that❤

[ProgKids]

Amazing post, thanks!

[Safdar Ali]

Glad to hear that❤ do subscribe my YouTube Channel

[Weston Ruter]

The Output Element example can be further simplified by eliminating the use of parseInt(input.value) in favor of input.valueAsNumber:

<form oninput="result.value = a.valueAsNumber + b.valueAsNumber">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

[Colum Kelly]

The element is essential for creating responsive images that adapt to different screen sizes and resolutions. It allows you to specify multiple image sources and choose the best one based on the device’s capabilities.

You can do this with a single img tag using the sizes and srcset attributes. Picture is used when you also want to change the aspect ratio of the image.

[Blessing Emejulu]

As frontend developer, I use picture tag when I have different images to display on across different screen sizes