Ever wonder how do websites create the same content, such as product cards or user profiles, repeatedly, without manually copying and pasting code?
They use the HTML5 <template> element. It’s a tool that lets you create reusable content snippets, keeping your code clean and prevents frustration.
Let’s get into the details of how the <template> tag works and its advantages.
What does the `<template>` Element do?
Think of the <template> element as a storage box for HTML code.
You insert a piece of markup inside it, and the browser ignores it until you’re ready to use it.
The content inside <template> doesn’t render on the page—it’s not visible. This makes it perfect for reusable components, like a card layout you want to print out multiple times.
Here’s a simple example:
Your HTML contains this code, which remains inactive until invoked.
How Do You Use Templates?
To use a template, you need some JavaScript code to fetch its content and insert it into the webpage.
Here’s how it works:
- Select the template
- Clone its content
- Add it to the page
Let’s see it in action:
This code selects the template with document.getElementById(“my-card”), returns its content with content property and clones the node and its whole subtree with cloneNode, then it adds it to the #container div with the help of hte appendChild() method.
Are Templates worth the effort?
Perhaps you’re wondering, “Why not just code the HTML yourself?”.
Templates are ideal for repeated use of the same structure, for instance, product or comment lists.
Copy-pasting code is messy and hard to maintain—if you need to change something, you’re stuck updating every copy. With <template>, you edit once, and JavaScript handles the rest.
Plus, templates are efficient. Since their content doesn’t render until you use it, they don’t slow down your page load.
Think of it as preparing ingredients beforehand, but waiting to cook until your guests are present.
Whats the catch?
Templates are simple, however, they have a small weakness: they are inactive.
The thing is you can’t style or interact with their content until it’s cloned and added to the page.
Thanks to this they significantly improves performance; however, it can feel odd if you are used to instantly viewing your HTML. Also, older browsers such as Internet Explorer 11 may have issues, but most modern browsers work well.
A cool use case
Another cool feature? You can pair templates with JavaScript to dynamically fill in data.
For example, loop through an array of products and update the cloned template’s text before adding it to the page.
Wrapping it up
Use the <template> element to achieve cleaner, reusable HTML.
Whether you’re building a blog, a shop, or a portfolio, templates save time and keep things organized.
Although my blog doesn’t support comments, feel free to reply via email or X.