<template><template>El elemento <template> en HTML5 proporciona un mecanismo para almacenar contenido del DOM que no se renderiza cuando la página se carga, pero que puede ser instanciado de forma dinámica mediante scripts de JavaScript. Ese contenido puede incluir HTML estándar, texto y otros elementos HTML. Esencialmente, este elemento actúa como un contenedor para el contenido que el navegador ignora hasta que se inserta en el documento DOM.
<template>El elemento <template> es bastante simple en cuanto a sus atributos:
<template> soporta los atributos globales. Estos incluyen:
accesskeyclasscontenteditabledata-*dirdraggablehiddenidlangspellcheckstyletabindextitletranslateSin embargo, el elemento <template> no tiene atributos específicos propios fuera de los atributos globales que ya mencionamos.
<template> en HTML5: Ejemplos SencillosA continuación se presentan algunos ejemplos básicos para ilustrar cómo se utiliza el elemento <template> en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Uso de <template></title>
</head>
<body>
<h1>Lista de miembros</h1>
<ul id="memberList"></ul>
<template id="memberTemplate">
<li class="member-item">
<span class="member-name"></span>
<span class="member-role"></span>
</li>
</template>
<script>
// Miembros que vamos a insertar
const members = [
{ name: 'Juan Perez', role: 'Desarrollador' },
{ name: 'Maria López', role: 'Diseñadora' },
{ name: 'Carlos García', role: 'Gerente de Proyecto' },
];
const memberList = document.getElementById('memberList');
const template = document.getElementById('memberTemplate').content;
members.forEach(member => {
const clone = document.importNode(template, true);
clone.querySelector('.member-name').textContent = member.name;
clone.querySelector('.member-role').textContent = member.role;
memberList.appendChild(clone);
});
</script>
</body>
</html>En este ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Componentes Reutilizables con <template></title>
</head>
<body>
<h1>Artículos Destacados</h1>
<div id="articlesContainer"></div>
<template id="articleTemplate">
<article class="article">
<h2 class="article-title"></h2>
<p class="article-content"></p>
</article>
</template>
<script>
// Artículos que vamos a insertar
const articles = [
{ title: 'Cómo usar JavaScript', content: 'Guía completa sobre el uso de JavaScript en el desarrollo web.' },
{ title: 'Introducción a HTML5', content: 'Fundamentos y novedades de HTML5.' },
{ title: 'CSS para Principiantes', content: 'Cómo empezar a usar CSS para diseñar páginas web.' },
];
const articlesContainer = document.getElementById('articlesContainer');
const template = document.getElementById('articleTemplate').content;
articles.forEach(article => {
const clone = document.importNode(template, true);
clone.querySelector('.article-title').textContent = article.title;
clone.querySelector('.article-content').textContent = article.content;
articlesContainer.appendChild(clone);
});
</script>
</body>
</html>En este ejemplo:
Estos ejemplos ilustran cómo el elemento <template> puede ser una herramienta poderosa para la generación dinámica y reutilización de contenido en una aplicación web.