- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <template> Tag
HTML <template> tag is a mechanism for holding some HTML or client-side content hidden from the user when the page loads. The browser evaluates the content of the <template> tag when loading the page to ensure that it is valid; however, the contents are not shown. The template's content will not be displayed unless it is not active using JavaScript.
If we want to use same content multiple times in our HTML document without any changes then we can use <template> tag.
The <template> tag can be used anywhere inside an HTML document, such as in <head>, <body>, <frameset>, or <table> elements.
Syntax
<template>.....</template>
Attribute
HTML template tag supports Global and Event attributes of HTML. A specific attribtes is accepted as well which is listed below.
Examples of HTML template Tag
Bellow examples will illsutarte the usage of template tag, when, where and how to use it to hide element behind a trigger point.
Hiding content using template tag
We can hide any content inside of template tag when the browser will load the page and use a button as trigger point to render that element latter. In the following example, we are using the <template> tag to hold the content when the page loads, later on we are displaying the hidden content by using JavaScript.
<!DOCTYPE html> <html> <body> <h1>The template Element</h1> <p> When you click the button below, JavaScript is activated, and hidden content will become visible! </p> <button onclick="showContent()">Show hidden content</button> <template> <h2>Tutorialspoint</h2> <p>Tutorialspoint: <q> is an EdTech organisation that provides courses related to CSE and so many tutorials and DSA solutions. <q> </p> <p>Easy to learn!</p> </template> <script> function showContent() { let temp = document.getElementsByTagName("template")[0]; let clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> </html>
Hiding image using template tag
We can hide any content inside of template tag when the browser will load the page and use a button as trigger point to render that element latter. Considering the following example, we are using the <template> tag to hide the image when the page loads, later on we are displaying the hidden content by using JavaScript.
<!DOCTYPE html> <html> <head> <title>HTML Template tag</title> </head> <body> <h2>Example of template tag</h2> <button onclick="clickMe()">Click Me</button> <br> <template id="mytemplate"> <img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="logo"> <script> alert("Thank you for choosing template. Click OK for tutorialspoint Logo.") </script> </template> <script> function clickMe() { var x = document.getElementsByTagName("template")[0]; var clon = x.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
template | Yes 26.0 | Yes 13.0 | Yes 22.0 | Yes 8.0 | Yes 15.0 |
To Continue Learning Please Login
Login with Google