## HTML <template> Tag
The HTML `` element is a powerful mechanism for holding client-side content that is not rendered when the page is loaded. Instead, it is stored as a reusable fragment of markup that can be instantiated and rendered later at runtime using JavaScript.
---
## Introduction and Usage
The `` tag acts as a container for HTML code that you want to reuse across your web application.
### Key Characteristics:
* **Inert Content:** The browser parses the contents of the `` element, but it does not render it. Images inside a template are not downloaded, scripts are not executed, and media does not play until the template is instantiated.
* **DocumentFragment:** The content of a template is stored in a `DocumentFragment`, accessible via the template's `.content` property.
* **Performance:** Cloning templates is highly efficient, making it an excellent choice for rendering dynamic lists, tables, or UI components.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `` element.
| Element | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `` | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
---
## Code Examples
### Example 1: Basic Usage
In this example, the content inside the `` tag is hidden when the page loads. Clicking the button triggers a JavaScript function that clones the template content and appends it to the document body.
```html
YouTip Logo
```
---
### Example 2: Dynamically Populating Data
You can use a single template to render multiple items dynamically. In this example, we loop through an array and populate a template for each item.
```html
I like:
```
---
### Example 3: Feature Detection
You can programmatically check if the user's browser supports the `` element by verifying the existence of the `content` property:
```javascript
if ('content' in document.createElement('template')) {
console.log("Your browser supports the tag!");
} else {
console.log("Your browser does not support the tag!");
}
```
---
## Global Attributes
The `` tag supports all (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
---
## Key Considerations
1. **`cloneNode` vs `importNode`**:
* Use `document.importNode(template.content, true)` or `template.content.cloneNode(true)` to copy the template's content. Both methods are widely used, but `importNode` is generally recommended when moving nodes across different document contexts.
2. **Styling and Scripts**:
* Although styles and scripts inside a `` are inert on load, once they are cloned and appended to the active DOM, any `
YouTip
```
---
### Example 2: Dynamically Populating Data
You can use a single template to render multiple items dynamically. In this example, we loop through an array and populate a template for each item.
```html