Etiqueta HTML `<template>`

La etiqueta <template> se utiliza para almacenar fragmentos de código HTML, que pueden clonarse e insertarse en un documento HTML.

El contenido de la etiqueta está oculto para los usuarios. Se almacena en el lado del cliente. Es inerte hasta que se activa mediante JavaScript.

El navegador procesa el contenido del elemento <template> mientras carga la página para garantizar que el código sea válido.

Las plantillas pueden colocarse en cualquier lugar dentro de <head> o <body>, y pueden contener cualquier tipo de contenido permitido en esos elementos.

La etiqueta <template> es un elemento nuevo en HTML5.

Todo lo que se encuentra dentro del elemento <template> se analiza como HTML normal. Sin embargo, hay algunas excepciones:

No se renderiza.
Las etiquetas <script> dentro de él no se ejecutan.
Las etiquetas <style> dentro de él no se evalúan.
Los recursos externos no se renderizan.
El contenido dentro de este elemento no se considera parte del documento. Si se utiliza document.getElementById() o querySelector() en la página principal, los nodos hijos de una plantilla no se encontrarán.

Sintaxis

La etiqueta <template> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<template>) y cierre (</template>).

Ejemplo de la etiqueta HTML `<template>`:

Ejemplo de la etiqueta HTML <template>

html

<!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>

Try it Yourself »

Ejemplo de la etiqueta HTML `<template>` utilizada con JavaScript:

Ejemplo de la etiqueta HTML <template> con JavaScript:

html

<!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>

Try it Yourself »

Resultado

ejemplo de plantilla

La etiqueta <template> admite los Atributos Globales.

Práctica

¿Cuál es la funcionalidad de la etiqueta HTML '<template>' y cómo se utiliza?

La etiqueta '<template>' es una API integrada que se vincula automáticamente a varias bases de datos.La etiqueta '<template>' se utiliza para permitir cookies de sesión dentro de un documento HTML.La etiqueta '<template>' se utiliza en HTML para almacenar contenido del lado del cliente que no deseas mostrar cuando se carga la página.La etiqueta '<template>' se utiliza en HTML para crear plantillas reutilizables de los mismos objetos.La etiqueta '<template>' en HTML no puede ser vista directamente por el usuario cuando se carga la página.La etiqueta '<template>' puede alojar cualquier HTML estándar, incluidas otras etiquetas '<template>'.

Etiqueta HTML <template> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <template>: ​

Ejemplo de la etiqueta HTML <template> utilizada con JavaScript: ​