La etiqueta <template> en HTML se usa para almacenar los fragmentos de código HTML, que se pueden clonar e insertar en un documento HTML. El contenido de la etiqueta está oculto para los clientes que se almacenan en el lado del cliente. Se inserta hasta que se activa usando JavaScript. Use JavaScript para obtener el contenido de una plantilla y agréguelo a la página web.
Sintaxis:
<template> Contents </template>
Nota: La etiqueta <template> es nueva en HTML 5.
Atributos: esta etiqueta admite los atributos globales en HTML.
Ejemplo 1: En este ejemplo, tenemos una lista desordenada de los cursos que hemos ocultado para mostrar usando la etiqueta <template> en HTML.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h3>HTML template tag</h3> <p> Content inside a template tag will be hidden from the client. </p> <!-- Html script tag starts here --> <template> <h2>GeeksforGeeks: A computer science portal</h2> <h4>GeeksforGeeks Offline Courses</h4> <ul> <li>DSA</li> <li>Placement & Interview Preparation</li> <li>Web Development</li> <li>Algorithms & basic programming</li> </ul> </template> <!-- Html template tag ends here --> <p>End of the example of template tag</p> </body> </html>
Producción:
Etiqueta de plantilla HTML
Ejemplo 2: este ejemplo usa una etiqueta de plantilla y oculta el contenido dentro de la etiqueta de plantilla.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h3>HTML template tag</h3> <p> Content inside a template tag is hidden from the client. </p> <!-- html script tag starts here --> <template> <h2>GeeksforGeeks: A computer science portal</h2> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210922100958/gfg3-300x300.png"> Content Writer: <input type="text" placeholder="author name"> </template> <!-- html template tag ends here --> <p>End of the example of template tag</p> </body> </html>
Producción:
Etiqueta de plantilla HTML
Ejemplo 3: este ejemplo ilustra los usos de JavaScript para mostrar el contenido de la etiqueta de la plantilla.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML template tag</h3>
<p>
Click the button to get the content from a template,
and display it in the web page.
</p>
<button onclick="myGeeks()"> Show content </button>
<!-- Html template tag starts here -->
<template>
<h2>GeeksforGeeks: A computer science portal</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210922100958/gfg3-300x300.png">
<br>
Content Writer:
<input type="text"
placeholder="author name">
</template>
<!-- Html template tag ends here -->
<!-- Script to display the content of template tag -->
<script>
function myGeeks() {
var t = document.getElementsByTagName("template")[0];
var clone = t.content.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
Producción:
Etiqueta de plantilla HTML
Navegadores compatibles:
- Google Chrome 93.0 y superior
- Microsoft Edge 93.0
- Firefox 92.0 y superior
- Safari 14.1
- Ópera 79.0