Tag <template> In HTML

In this post, we will talk about Tag template with examples. We aspire to meet the demands of learning.

The <template> tag in HTML is a special element used to declare content that is not rendered by the browser until it is instantiated by JavaScript. It allows you to define a reusable block of HTML that can be used throughout your website without having to copy and paste the same code.

The content inside a <template> tag is not displayed on the web page, but rather used as a template that can be cloned and inserted into the DOM dynamically at runtime. This makes it an efficient way to manage and generate dynamic content, especially for web applications that rely heavily on JavaScript. The <template> tag is supported by all modern web browsers and can be styled using CSS.

In HTML, Tag <template> consists of two parts. Typically, content appears inside the opening <template> and closing </template> tags.

The following is an example of how to use the HTML <template> tag:

Example: 

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading.</h1> <p> <q>It is during our darkest moments that we must focus to see the light.</q> -Aristotle </p> <template> <h2>This is a second heading.</h2> <p> "Many of life's failures are people who did not realize how close they were to success when they gave up." -Thomas A. Edison </p> </template> </body> </html>

With JavaScript, here is an example of a HTML <template> tag:

Example: 

<!DOCTYPE html> <html> <head> <title>Mr Examples</title> <script> function useTemplate() { var myTemplate = document.getElementById('Temp'); normalContent = document.getElementById('cont'); clonedTemplate = myTemplate.content.cloneNode(true); normalContent.appendChild(clonedTemplate); } </script> </head> <body> <template id="Temp"> <p>This is the content placed inside the template tag</p> </template> <div id="cont"> <p>Hello welcome to Mr Examples</p> </div> <button onclick="useTemplate();">Click to see more content</button> </body> </html>

To create a reusable template for a list of item:

Example: 

<!DOCTYPE html> <html> <head> <title>List of Items Template</title> <style> ul { list-style: none; padding: 0; } li { margin-bottom: 10px; } </style> </head> <body> <h1>List of Items</h1> <ul> {{#each items}} <li>{{this}}</li> {{/each}} </ul> </body> </html>

Here is an example of template for a modal dialog box:

Example: 

<!DOCTYPE html> <html> <head> <title>Mr Examples</title> </head> <body> <template id="modal-template"> <div class="modal-overlay"> <div class="modal-content"> <h2>Modal Title</h2> <p>Modal content goes here</p> <button class="modal-close-btn">Close</button> </div> </div> </template> </body> </html>

You can create dynamic lists of items using HTML documents and JavaScript with the <template> tag:

Example: 

<!DOCTYPE html> <html> <head> <title>Example of the template tag</title> </head> <body> <h1>Items</h1> <ul id="items-list"></ul> <template id="item-template"> <li> <span class="item-name"></span> <span class="item-price"></span> </li> </template> <script> var itemTemplate = document.getElementById('item-template'); var items = [ { name: 'Item 1', price: '$5.99' }, { name: 'Item 2', price: '$9.99' }, { name: 'Item 3', price: '$12.99' } ]; var itemsList = document.getElementById('items-list'); for (var i = 0; i < items.length; i++) { var itemClone = itemTemplate.content.cloneNode(true); itemClone.querySelector('.item-name').innerText = items[i].name; itemClone.querySelector('.item-price').innerText = items[i].price; itemsList.appendChild(itemClone); } </script> </body> </html>

The following example shows how CSS styles might be added:

Example: 

<!DOCTYPE html> <html> <head> <title>Example of the template tag</title> <style> #items-list { list-style: none; padding: 0; } #items-list li { border: 1px solid gray; padding: 10px; margin-bottom: 10px; } #items-list .item-name { font-weight: bold; } #items-list .item-price { color: green; } </style> </head> <body> <h1>Items</h1> <ul id="items-list"></ul> <template id="item-template"> <li> <span class="item-name"></span> <span class="item-price"></span> </li> </template> <script> var itemTemplate = document.getElementById('item-template'); var items = [ { name: 'Item 1', price: '$5.99' }, { name: 'Item 2', price: '$9.99' }, { name: 'Item 3', price: '$12.99' } ]; var itemsList = document.getElementById('items-list'); for (var i = 0; i < items.length; i++) { var itemClone = itemTemplate.content.cloneNode(true); itemClone.querySelector('.item-name').innerText = items[i].name; itemClone.querySelector('.item-price').innerText = items[i].price; itemsList.appendChild(itemClone); } </script> </body> </html>
Table Of Content-

Tag Template Uses

Tag <template> is primarily employed as a container to store HTML content that will be invisible to the user when the page loads.

The information contained in <template> can be presented in the future through JavaScript.

It is possible to apply the Tag <template> whenever you would like to repeat the same HTML code, but only after you request it. If you don’t want the browser to display the HTML code without the <template> tag, you must create the HTML code in Javascript.

Here are some common use cases for tag templates:

  • Tag templates can be used to create reusable user interface (UI) components such as buttons, menus, forms, and dialogs. By defining a tag template for each component, developers can reuse the same code across multiple pages and applications, making it easier to maintain and update their UI components.
  • Tag templates can be used to display dynamic content on web pages. For example, you could use a tag template to display a list of products on an e-commerce website. By passing in the product data as a parameter to the tag template, you can dynamically generate the list without having to write custom HTML for each product.
  • Tag templates can be used to define page layouts that can be reused across multiple pages in a web application. For example, you could define a tag template for a two-column layout with a header and footer, and then reuse that layout on multiple pages throughout your application.
  • Tag templates can be used to define custom HTML elements that are not part of the standard HTML specification. This can be useful for creating semantic HTML that better describes the content of your web pages. For example, you could define a custom <product-list> tag that displays a list of products on your website.
  • Tag templates are often used in conjunction with JavaScript frameworks such as React, Vue, and Angular. These frameworks provide their own templating engines that allow developers to create tag templates and define how they should be rendered on the page. This can make it easier to create complex web applications that are more modular and maintainable.

Attributes

Global

The Tag template <template> accepts the Global Attributes in HTML.

Browser Compatibility

Element
<template>26.013.022.08.015.0

Tag Template Importance

Tag templates are an important feature of modern web development for several reasons:

  • Tag templates make it easy to create reusable components that can be used across multiple pages and applications. This can save developers a lot of time and effort by allowing them to write code once and reuse it wherever it’s needed.
  • By using tag templates, developers can separate the structure and behavior of their web applications into smaller, more manageable components. This makes it easier to maintain and update the code over time, as changes to one component will not affect the functionality of other components.
  • Tag templates can help ensure consistency in the design and layout of web pages across an application or website. By using the same tag templates for similar types of content, developers can ensure that pages look and behave consistently, making for a better user experience.
  • Tag templates can help web applications scale more easily by allowing developers to create modular components that can be added or removed as needed. This can make it easier to add new features or functionality to an application without having to rewrite large portions of the code.
  • Tag templates can be designed with accessibility in mind, making it easier to create web applications that are usable by everyone. By defining consistent markup and behavior for UI components, developers can ensure that users with disabilities can interact with their applications in a meaningful way.
Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *