Tag HTML <template>
A tag <template> armazena fragmentos de código que podem ser clonados e usados repetidamente no documento HTML. Veja exemplos.
A tag <template> contém marcação HTML que você deseja reutilizar, mas não renderizar quando a página carrega. O navegador analisa a marcação para garantir que ela é válida e, em seguida, a mantém à parte como um modelo inerte. Você clona esse modelo com JavaScript sempre que precisar de uma cópia na página ativa — um padrão comum para criar itens de lista, linhas de tabela ou cartões repetidos.
Esta página aborda o que torna o conteúdo de template inerte, como ativá-lo com JavaScript (content, cloneNode, appendChild) e um loop prático que cria muitos elementos a partir de um único template.
A tag <template> é um novo elemento em HTML5. Ela pode ser colocada em qualquer lugar dentro de <head> ou <body>, e pode conter qualquer conteúdo que esses elementos permitem.
Por que o conteúdo do template é inerte
Tudo dentro de um <template> é analisado como HTML normal, mas o navegador o trata como inerte até que você o ative. Isso significa que:
- Ele não é renderizado — nada dentro do template aparece na página.
- As tags
<script>dentro dele não são executadas. - As tags
<style>dentro dele não são aplicadas. - Os recursos externos não são carregados — as fontes de
<img>,<video>e<audio>não são buscadas, portanto um template com 100 imagens não gera nenhuma requisição de rede até que você o utilize. - Seus nós não fazem parte da árvore principal do documento. Chamar
document.getElementById()ouquerySelector()na página não encontrará elementos que residem dentro de um template.
Essa inércia é justamente o ponto: você pode incluir um trecho de marcação na página que permanece leve e sem efeitos colaterais até o momento em que você realmente precisar dele.
Sintaxe
A tag <template> vem em pares. O conteúdo é escrito entre as tags de abertura (<template>) e fechamento (</template>).
Exemplo da tag HTML <template>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>
<q>If you tell the truth, you don't have to remember anything.</q>
― Mark Twain
</p>
<template>
<h2>This is a second heading.</h2>
<p>
“I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
― Marilyn Monroe
</p>
</template>
</body>
</html>Se você abrir o exemplo acima, o segundo título e a citação de Marilyn Monroe não aparecem em lugar nenhum na página — eles ficam dentro do <template>, que é invisível e inerte no momento do carregamento. Nada é renderizado até que o JavaScript clone o conteúdo no documento ativo.
Ativando um template com JavaScript
Para usar o conteúdo do template, você o lê por meio da propriedade content do elemento, o clona e insere o clone na página. Veja o padrão canônico, detalhado a seguir:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<template id="myTemplate">
<p>Template content</p>
</template>
<div id="normalContent">
<p>First paragraph</p>
</div>
<!-- JavaScript function clones the template and adds it to the document. -->
<button onclick="useTemplate();">Show content</button>
<script>
function useTemplate() {
const myTemplate = document.getElementById('myTemplate');
const normalContent = document.getElementById('normalContent');
const clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</body>
</html>Quando o botão é clicado, a função useTemplate() é executada. Veja o que cada linha faz:
myTemplate.contentretorna oDocumentFragmentdo template — um contêiner leve, fora do documento, que contém os nós filhos do template. Você nunca insere esse fragmento diretamente, pois isso esvaziaria o template original; em vez disso, você o clona..cloneNode(true)cria um clone profundo do fragmento. O argumentotruesignifica "clonar este nó e todos os seus descendentes". Comfalse, você copiaria apenas o fragmento vazio e perderia o<p>dentro dele, portanto para templates quase sempre você passatrue.normalContent.appendChild(clonedTemplate)insere os nós clonados no DOM ativo, após o primeiro parágrafo existente. Por ser uma cópia, o template permanece intacto e pode ser reutilizado quantas vezes quiser.
Para mais informações sobre esses métodos, consulte JavaScript HTML DOM.
Caso de uso: criando conteúdo repetido em um loop
A verdadeira força do <template> aparece quando você precisa de muitos elementos semelhantes. Em vez de escrever cada linha à mão ou construir marcação com concatenação de strings, você mantém um modelo e o clona para cada dado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul id="fruitList"></ul>
<template id="itemTemplate">
<li class="fruit"></li>
</template>
<script>
const fruits = ['Apple', 'Banana', 'Cherry'];
const list = document.getElementById('fruitList');
const template = document.getElementById('itemTemplate');
fruits.forEach(function (fruit) {
// Clone the template for each fruit.
const clone = template.content.cloneNode(true);
// Fill in the clone before inserting it.
clone.querySelector('.fruit').textContent = fruit;
list.appendChild(clone);
});
</script>
</body>
</html>Isso produz três itens <li>, um por fruta. A mesma abordagem se aplica a linhas de tabela, cartões de produto ou qualquer lista orientada por dados — defina a marcação uma vez, clone-a em um loop e preencha as partes dinâmicas antes de adicionar.
A tag <template> suporta os Atributos Globais.