HTML template

La etiqueta <template> es un elemento de plantilla en HTML5 que se utiliza para contener contenido que se utilizará como plantilla para crear nuevos elementos. El contenido dentro de la etiqueta <template> no se renderiza en la página cuando se carga, sino que se utiliza como una plantilla para crear elementos dinámicamente mediante JavaScript.

Por ejemplo, si deseas crear varios elementos de lista con contenido similar, puedes utilizar la etiqueta <template> para definir una plantilla de elemento de lista y luego utilizar JavaScript para crear varios elementos de lista basados en esa plantilla.

Ejemplo de uso

La sintaxis básica para utilizar la etiqueta <template> es la siguiente:

<template>
  <!-- Contenido de la plantilla -->
</template>

Lenguaje del código: HTML, XML (xml)

La etiqueta <template> se utiliza junto con JavaScript para crear elementos dinámicamente. En JavaScript, puedes acceder al contenido de la plantilla utilizando el método content del elemento <template>, que devuelve un objeto DocumentFragment con el contenido de la plantilla. Luego, puedes utilizar ese objeto para crear nuevos elementos y agregarlos a la página.

Ejemplo:

<template id="product-template">
  <div class="product">
    <img src="product.jpg">
    <h2>Product Name</h2>
    <p>Product Description</p>
    <button>Add to Cart</button>
  </div>
</template>

<script>
  // Get the template content
  var template = document.querySelector('#product-template');
  var templateContent = template.content;

  // Create a new product element
  var product = templateContent.cloneNode(true);
  product.querySelector('h2').textContent = 'New Product';
  product.querySelector('img').src = 'new-product.jpg';
  product.querySelector('p').textContent = 'New Product Description';

  // Add the new product element to the page
  document.querySelector('body').appendChild(product);
</script>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se usa una plantilla <template> con un id específico para crear un elemento de producto y añadirlo a la página mediante JavaScript.

Atributos

La etiqueta <template> no tiene atributos específicos en HTML5. Sin embargo, se pueden utilizar los atributos estándar de HTML, como id o class, para establecer una referencia al elemento <template> en JavaScript o para establecer estilos en línea.

Por ejemplo, se puede utilizar el atributo id para hacer referencia al elemento <template> en JavaScript:

<template id="myTemplate">
  <!-- Contenido de la plantilla -->
</template>

<script>
  var template = document.querySelector('#myTemplate');
</script>

Lenguaje del código: HTML, XML (xml)

También se pueden aplicar estilos en línea al elemento <template> mediante el uso de atributos class o style:

<template class="hidden">
  <!-- Contenido de la plantilla -->
</template>

Lenguaje del código: HTML, XML (xml)

<template style="display: none;">
  <!-- Contenido de la plantilla -->
</template>

Lenguaje del código: HTML, XML (xml)

Sin embargo, debes tener en cuenta que estos atributos no son específicos de la etiqueta <template> y pueden ser usados en cualquier elemento de HTML5.

Más ejemplos

Aquí te dejo unos ejemplos de cómo se puede utilizar la etiqueta <template> en HTML5:

1. Crear una plantilla para una lista de elementos:

<template id="itemTemplate">
  <li>
    <span class="item-name"></span>
    <span class="item-price"></span>
  </li>
</template>

Lenguaje del código: HTML, XML (xml)

2. Utilizar la plantilla para crear varios elementos de una lista:

<ul id="myList"></ul>

<script>
  var template = document.querySelector('#itemTemplate');
  var list = document.querySelector('#myList');

  var items = [
    { name: 'item1', price: '$10' },
    { name: 'item2', price: '$20' },
    { name: 'item3', price: '$30' }
  ];

  items.forEach(function(item) {
    var clone = template.content.cloneNode(true);
    clone.querySelector('.item-name').textContent = item.name;
    clone.querySelector('.item-price').textContent = item.price;
    list.appendChild(clone);
  });
</script>

Lenguaje del código: HTML, XML (xml)

3. Crear una plantilla para un componente reutilizable:

<template id="cardTemplate">
  <div class="card">
    <img src="" alt="" class="card-image">
    <h2 class="card-title"></h2>
    <p class="card-description"></p>
  </div>
</template>

Lenguaje del código: HTML, XML (xml)

4. Utilizar la plantilla para crear varios componentes card:

<div id="cardContainer"></div>

<script>
  var template = document.querySelector('#cardTemplate');
  var container = document.querySelector('#cardContainer');

  var cards = [
    { title: 'Card 1', description: 'Description 1', image: 'image1.jpg' },
    { title: 'Card 2', description: 'Description 2', image: 'image2.jpg' },
    { title: 'Card 3', description: 'Description 3', image: 'image3.jpg' }
  ];

  cards.forEach(function(card) {
    var clone = template.content.cloneNode(true);
    clone.querySelector('.card-title').textContent = card.title;
    clone.querySelector('.card-description').textContent = card.description;
    clone.querySelector('.card-image').src = card.image;
    container.appendChild(clone);
  });
</script>

Lenguaje del código: HTML, XML (xml)

Como se puede ver en estos ejemplos, se usa JavaScript para clonar el contenido de la plantilla y modificarlo según sea necesario, y luego se añade al DOM.