HTML5 template element es una de las características de HTML5 mas deseadas por parte de todos los desarrolladores web. Hoy en día muchos se apoyan en motores de plantillas de Javascript como HandleBars o Mustache para solventar sus problemas. Sin embargo los navegadores poco a poco están aumentando el soporte para las plantillas nativas de HTML5 como podemos ver en la web de caniuse.
El soporte es relativamente reciente y navegadores como Edge de Microsoft todavía no lo soportan.
HTML5 Template Element (ejemplo)
Vamos a construir un ejemplo que nos sirva para ver como funciona esta standard
<html>
<head>
<script type="text/javascript">
window.onload=function() {
var miPlantilla = document.querySelector("#miPlantilla");
console.log(miPlantilla);
var zona = document.getElementById("zona");
var contenidoPlantilla = miPlantilla.content;
nuevoContenido = contenidoPlantilla.cloneNode(true);
nuevoContenido2 = contenidoPlantilla.cloneNode(true);
zona.appendChild(nuevoContenido);
zona.appendChild(nuevoContenido2);
}
</script>
</head>
<body>
<template id="miPlantilla">
<p>Esta es nuestra primera plantilla en HTML5</p>
</template>
<div id="zona">
</div>
</body>
</html>
El código se encarga de definir una plantilla a nivel de html5 utilizando la etiqueta “template”. Esta etiqueta la usaremos luego en JavaScript para clonar la zona y replicarla dos veces.
Hay que recordar que hoy por hoy los motores de plantillas de JavaScript soportan más capacidades que HTML5 pero poco a poco los standares de HTML5 ocuparan su lugar.
Otros artículos relacionados: JSON , jQuery y templates , El universo de las plantillas