Understanding the Template Tag in HTML5

1 min read


The <template> element defines fragments of isolated reusable UI components that are not visible on the rendered page. It’s like a blueprint for an HTML component, allowing you to create content templates that can be used multiple times within your code. The <template> tag is part of the Web Components specification and provides a way to encapsulate reusable markup, making it easier to maintain and update code.

Using <template> Tag

The basic structure of a <template> element is as follows:

<template id="myTemplate">
<!-- Content goes here -->

The content within the <template> Tag is not visible on the page but can be used later in your code. You can use JavaScript to insert the content of a template into the DOM or use it as the basis for creating new elements.

Example Usage:

Here’s an example of how you might use a <template> Element to create a reusable button component:

<template id="myButton">
<button class="btn">My Button</button>

<!-- Later in the code, we can create new instances of the button -->

var button = document.createElement('button');
// Get the content of the template
var templateContent = document.getElementById('myButton').content;
// Insert the content into the DOM

In this example, we define a button component within a <template> Element with an ID of “myButton”. Later in our code, we create a new button using JavaScript and insert the template’s content into the DOM to create a new instance of the button.

Attributes Applicable to the <template> Tag:

  • id: This attribute is used to specify a unique identifier for the <template> element. It can be used to reference the template in JavaScript code.
  • lang: Specifies the language of the content within the <template> element.


The <template> tag is an important tool in HTML that allows you to create reusable UI components that are not visible on the rendered page. It provides a way to encapsulate markup, making it easier to maintain and update code. By using the <template> tag, developers can reduce redundancy in their code and make their websites more efficient and easy to manage.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Carlos Baez

Subscribe now to keep reading and get access to the full archive.

Continue Reading