5 HTML Features You’re Not Using (But Should Use) ✅

Although many of these features have been overlooked by developers, they can significantly improve both web development efficiency and user experience.

In this article, I'll reveal the rest of the iceberg and show you what HTML is truly capable of.

Let’s dive in!

1. The <template> Element

The <template> element is one of those hidden gems in HTML5 that many developers haven't fully explored.

Without any need for frameworks like React, it serves as a container for holding HTML content that isn't rendered on the page immediately. Instead, this content can be cloned and inserted into the DOM later, usually via JavaScript.

It's ideal for scenarios where you need to render content dynamically, like in single-page applications (SPAs) or when you have components that get reused multiple times.

Here is how it works:

<template id="card-template">
    <div class="card">
        <img src="" alt="Image" class="card-img">
        <p class="card-text"></p>
    </div>
</template>

<script>
    const template = document.getElementById('card-template');
    const clone = template.content.cloneNode(true);
    clone.querySelector('.card-img').src = 'image.jpg';
    clone.querySelector('.card-text').textContent = 'This is a dynamic card!';
    document.body.appendChild(clone);
</script>

In this example, we have used the <template> element to create a reusable card component that can be easily cloned and customized with JavaScript.

---

2. The <picture> Element for Responsive Images

The <picture> element is designed to help developers display different images based on different conditions, such as screen size or resolution.

This feature makes media queries in CSS almost obsolete.

Here's how you can implement the <picture> element:

<picture>
    <source srcset="image-small.jpg" media="(max-width: 600px)">
    <source srcset="image-large.jpg" media="(min-width: 601px)">
    <img src="image-default.jpg" alt="Responsive Image">
</picture>

In this example, we've defined different image sources for different screen sizes, ensuring that the appropriate image is loaded depending on the user's device.

---

3. The <datalist> Element for Enhanced Input Fields

The <datalist> element is a great addition to HTML5, providing a way to offer predefined options within an input field.

It creates a drop-down list of suggestions that users can choose from, making forms more interactive and user-friendly.

Let's see how to use the <datalist> element in a search input field:

<label for="search">Search:</label>
<input list="suggestions" id="search" name="search">
<datalist id="suggestions">
    <option value="HTML5">
    <option value="CSS3">
    <option value="JavaScript">
    <option value="React">
</datalist>

---

4. Form Validation with HTML5 Attributes

HTML5 has introduced built-in form validation attributes such as required, pattern, minlength, and maxlength.

These attributes have allowed you to enforce input rules directly in the HTML, reducing the need for complex JavaScript validation.

Here's an example of a form with HTML5 validation:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="4" maxlength="20">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

    <input type="submit" value="Submit">
</form>

In this example, the element has displayed the sum of two numbers in real-time.

---

5. The <output> Element for Displaying Calculation Results

The <output> element is a great tool in HTML5 for displaying the results of calculations or user actions.

It's particularly useful in interactive forms or web applications where you want to show immediate feedback without relying on JavaScript.

Here's how the <output> element can be used:

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

In this example, the <output> element has displayed the sum of two numbers in real-time.

---

Made with ❤️ for modern front-end developers.

I hope this was helpful, and I’d be happy to connect and follow each other!

• LinkedIn

Comments

[chrdek]

Good helpful post, in the context of basic secure-by design UI/UX, most of these tags are what is recommended by well-known frameworks (both paid and free) for structuring content.
one question though: What is the basic difference of template tags and div or span tags?

[Joodi]

Thanks!
The main difference is:
is used to store some HTML that won’t show on the page right away.
It just sits there, hidden, until JavaScript is used to copy it and add it to the page.
On the other hand, or are shown immediately in the DOM.

[chrdek]

Oh ok, interesting to know. So it just dormant until web browser binds to a 'DOMContentLoaded' or document.load event (through js of course) for example. I'll be sure to use this more often.

[Joodi]

Yeah, exactly! It’s like that tag is just laying low until JS gives it the go-ahead 😄 Let me know how it goes when you try it out!

[Nevo David]

Impressive work highlighting useful HTML features, really insightful! What's your preferred way to teach these features to beginners to ensure they grasp their significance?

[Joodi]

Thanks a lot!

When teaching beginners, I suggest combining two things:

1. Real-world examples: showing where and why these features matter.
2. Interactive practice: letting them test and break things in a safe space. This helps make the learning process more practical and memorable.

[mohammad javad rezaei]

❤️❤️

[mohammad javad rezaei]

❤️❤️