Html template

Html template é usada como um contêiner para manter algum conteúdo HTML oculto do usuário quando a página é carregada.

O conteúdo interno <template> pode ser renderizado posteriormente com um JavaScript.

Você pode usar a tag <template> se tiver algum código HTML que deseja usar repetidamente, mas não até que você peça. Para fazer isso sem a tag template, você precisa criar o código HTML com JavaScript para evitar que o navegador renderize o código.

Use o tag template para manter algum conteúdo que ficará oculto quando a página for carregada. Use JavaScript para exibi-lo:

<button onclick="showContent()">Amostar ocultar Conteúdo</button>

<template>
  <h2>Códigos Html</h2>
  <img src="post.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>

Veja o exemplo na prática

Sintaxe

A tag <template> vem em pares. O conteúdo é escrito entre as tags de abertura (<template>) e de fechamento (</template>).