Manual de referencia HTML

Completísimo catálogo de etiquetas HTML

HTML: <template> etiqueta

El elemento de contenido de plantilla HTML ( <template> ) es una mecanismo utilizado para guardar contenido del cliente, que no se presenta al cargar la página, pero que puede ser instanciado usando JavaScript en tiempo de ejecución. Vea a la plantilla como un fragmento de contenido que se puede almacenar en el documento para su uso posterior. Aunque el analizador realmente procesa el contenido del elemento <template> al cargar la página, esto se hace solo para asegurarse de que ese contenido sea válido; el contenido del elemento no se renderiza.

Ejemplos en línea

Demostrar cómo usar la etiqueta template:

Ejemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso de etiquetas de plantilla HTML (Fundamentos de Tutoriales en línea oldtoolbag.com)<//</title>
</</head>
<body>
<p>El contenido dentro de una etiqueta de plantilla está oculto para el cliente.</</button>
<template>
　　<h2>Vistas</h2>
　　<img src="views.png">
</template>
<p>Un ejemplo posterior le mostrará cómo usar JavaScript para mostrar el contenido de la plantilla.</</button>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad con navegadores

IEFirefoxOperaChromeSafari

Todos los navegadores principales admiten la etiqueta <template>.

Definición y uso

La etiqueta <template> oculta su contenido del cliente.

El contenido dentro de la etiqueta <template> no se presenta.

Posteriormente, puede usar JavaScript para hacer visible y presentar el contenido.

Cuando necesite usar el código HTML repetidamente, utilice la etiqueta <template>, pero úsela solo cuando la necesite. Para realizar esta acción sin la etiqueta <template>, debe usar JavaScript para crear el código HTML, para evitar que el navegador lo presente.

Más ejemplos en línea

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>Uso de etiquetas de plantilla HTML (Fundamentos de Tutoriales en línea oldtoolbag.com)<//h1>
<p>Haga clic en el botón para obtener el contenido de una plantilla y mostrarlo en la página web.</</button>
<button onclick="mostrarContenido()">Mostrar contenido</button>
<template>
　　<h2>views</h2>
　　<img src="views.png" width="300" height="204">
</template>
<script>
function showContent() {
　　var temp = document.getElementsByTagName("template")[0];
　　var clon = temp.content.cloneNode(true);
　　document.body.appendChild(clon);
}
</script>
</body>
</html>

Prueba para ver ‹/›

HTML 4.01y HTML5diferencias entre

<template> etiqueta es HTML5nuevas etiquetas.

Atributos globales

Soporte de <template> etiqueta Atributos globales de HTML.

Atributos de eventos

Soporte de <template> etiqueta Atributos de eventos de HTML.

HTML: <wbr> etiqueta