تگ template در html

از تگ template برای پنهان کردن بخشی از محتوای صفحه که قرار است تحت شرایط خاصی نمایش داده شوند استفاده می‌شود.

محتوای تگ <template> را می‌توان تحت شرایط مورد نظر خد از طریق جاوا اسکریپت نمایش داد.

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>  

تگ template می‌تواند دارای چندین ویژگی یا attribute باشد که استفاده از این ویژگی‌ها اختیاری است.

تگ <template> از Global Attributes در HTML پشتیبانی می کند.

اکثر مرورگرها تگ <template> را با مقادیر پیش فرض زیر نمایش می دهند:

template{
  display: none;
}