Etiqueta HTML <template>
La etiqueta <template> almacena fragmentos de código que pueden clonarse y reutilizarse en el documento HTML. Ver ejemplos.
La etiqueta <template> contiene marcado HTML que deseas reutilizar, pero que no se renderiza cuando la página se carga. El navegador analiza el marcado para asegurarse de que es válido y luego lo conserva como un esquema inerte. Clonas ese esquema con JavaScript cuando necesitas una copia en la página activa — un patrón habitual para generar elementos de lista repetidos, filas de tabla o tarjetas.
Esta página explica qué hace que el contenido de una plantilla sea inerte, cómo activarlo con JavaScript (content, cloneNode, appendChild) y un bucle práctico que construye muchos elementos a partir de una sola plantilla.
La etiqueta <template> es un elemento nuevo en HTML5. Puede colocarse en cualquier lugar dentro de <head> o <body>, y puede contener cualquier contenido que esos elementos permitan.
Por qué el contenido de una plantilla es inerte
Todo lo que hay dentro de un <template> se analiza como HTML normal, pero el navegador lo trata como inerte hasta que lo activas. Eso significa que:
- No se renderiza — nada dentro de la plantilla aparece en la página.
- Las etiquetas
<script>que contiene no se ejecutan. - Las etiquetas
<style>que contiene no se aplican. - Los recursos externos no se cargan — las fuentes de
<img>,<video>y<audio>no se obtienen, por lo que una plantilla con 100 imágenes no genera ninguna solicitud de red hasta que la uses. - Sus nodos no forman parte del árbol del documento principal. Llamar a
document.getElementById()oquerySelector()en la página no encontrará elementos que vivan dentro de una plantilla.
Esta inercia es el punto clave: puedes incluir un fragmento de marcado en la página que permanece económico y sin efectos secundarios hasta el momento en que realmente lo necesitas.
Sintaxis
La etiqueta <template> va en pares. El contenido se escribe entre las etiquetas de apertura (<template>) y cierre (</template>).
Ejemplo de la etiqueta 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>Si abres el ejemplo anterior, el segundo encabezado y la cita de Marilyn Monroe no aparecen en ningún lugar de la página — se encuentran dentro del <template>, que es invisible e inerte en el momento de la carga. Nada se renderiza hasta que JavaScript clona el contenido en el documento activo.
Activar una plantilla con JavaScript
Para usar el contenido de una plantilla, lo lees a través de la propiedad content del elemento, lo clonas e insertas el clon en la página. Este es el patrón canónico, explicado a continuación:
<!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>Cuando se hace clic en el botón, se ejecuta la función useTemplate(). Esto es lo que hace cada línea:
myTemplate.contentdevuelve elDocumentFragmentde la plantilla — un contenedor ligero fuera del documento que contiene los nodos hijo de la plantilla. Nunca insertas este fragmento directamente, porque hacerlo vaciaría la plantilla original; en cambio, lo clonas..cloneNode(true)hace un clon profundo del fragmento. El argumentotruesignifica "clonar este nodo y todos sus descendientes". Confalsecopiarías solo el fragmento vacío y perderías el<p>que contiene, por lo que en las plantillas casi siempre se pasatrue.normalContent.appendChild(clonedTemplate)inserta los nodos clonados en el DOM activo, después del primer párrafo existente. Como es una copia, la plantilla permanece intacta y puede reutilizarse tantas veces como se desee.
Para más información sobre estos métodos, consulta JavaScript HTML DOM.
Caso de uso: construir contenido repetido en un bucle
La verdadera potencia de <template> se muestra cuando necesitas muchos elementos similares. En lugar de escribir cada fila manualmente o construir marcado con concatenación de cadenas, conservas un esquema y lo clonas para cada pieza de datos:
<!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>Esto produce tres elementos <li>, uno por fruta. El mismo enfoque escala a filas de tabla, tarjetas de producto o cualquier lista impulsada por datos — define el marcado una vez, clónalo en un bucle y rellena las partes dinámicas antes de añadirlo.
La etiqueta <template> admite los Atributos Globales.