<template>: HTML বিষয়বস্তু টেমপ্লেট উপাদান (The HTML Content Template element)। HTML এ <template> ট্যাগটি এইচটিএমএল কোডের টুকরো সঞ্চয় করার জন্য ব্যবহার করা হয় যা একটি পৃষ্ঠা লোড করার সাথে সাথে প্রদর্শিত হয় না। <template>-এর ভিতরের বিষয়বস্তু পরে জাভাস্ক্রিপ্ট দিয়ে রেন্ডার করা যেতে পারে। <template> ট্যাগটি ডিসপ্লে সহ একটি ডিভের মতো যার ভিতরে এইচটিএমএল নেই। যাইহোক, টেমপ্লেট ট্যাগের কিছু বৈশিষ্ট্য রয়েছে যা ডিসপ্লে কোনটি ছাড়াই ডিভের চেয়ে কাজ করা সহজ করে তোলে। HTML বিষয়বস্তু টেমপ্লেট উপাদান (The HTML Content Template element) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<h1>Template tag</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, impedit. Necessitatibus dolore odit, error,
quod at perspiciatis excepturi ex ipsum impedit rerum fugiat, labore unde minus sapiente. Qui, quibusdam eius.
</p>
<button onclick="showTemplate()">Click Me</button>
<!-- The template tag -->
<template>
<table border="1px">
<!-- table head -->
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</tr>
</thead>
<!-- table body -->
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
<td>nine</td>
</tr>
</tbody>
</table>
</template>
<!-- use javascript for better understand the template tag -->
<script>
function showTemplate() {
let temp = document.getElementsByTagName("template")[0];
let visible = temp.content.cloneNode(true);
document.body.appendChild(visible);
}
</script>
</body>
</html>