HTML template Tag

HTML template tag is used to store reusable HTML code fragments that are not rendered when the page loads.,Its content remains hidden on the client side and can be activated, cloned, and inserted into the document using JavaScript.

• Stores HTML content that is not displayed immediately on the webpage.
• Helps in reusing markup without duplicating code.
• Content is rendered only when triggered using JavaScript.
• Improves performance and keeps HTML structure clean and organized.

we have an unordered list of the courses that we have hidden to display using the <template> tag in HTML.

Syntax:

<template id="myTemplate">
 <p>This is template content</p>
</template>

Note: The <template> tag is new in HTML 5. This tag supports the global attributes in HTML.

[Approach1]: Using template tag content stays hidden until used

[Approach 2]: To illustrates the uses of JavaScript to display the template tag content.

Output:

Use Cases

1. Lists and Cards

• Creates multiple list items or cards by cloning the same HTML structure using JavaScript.
• Reduces repetition and keeps the HTML code clean and consistent.

2. User Interaction Based Rendering

• Displays content only after user actions such as button clicks or selections.
• Enhances interactivity and improves user experience.

3. Reusable UI Components

• Helps build reusable components like modals, alerts, and navigation menus.
• Makes maintenance easier by updating the structure in one place.

4. Improved Page Performance

• Keeps unused content hidden until it is required.
• Reduces initial page load time and improves performance.