This translation is incomplete. Please help translate this article from English

L'elemento <template> è utilizzato per dichiarare frammenti di codice HTML che non vengono renderizzati quando la pagina viene caricata ma possono essere clonati e inseriti successivamente con uno script.

Detto in altre parole un template è una parte di contenuto che viene memorizzato per un successivo utilizzo nel documento. Mentre il parser, durante il caricamento della pagina, incontra i contenuti di un elemento <template>, esso controllerà unicamente che il contenuto è valido. Solo quando l'elemento sarà clonato ed inserito il parser provvederà a renderizzarlo. 

Content categories Metadata content, flow content, phrasing content, script-supporting element
Permitted content Metadata content, flow content, any valid HTML content that is permitted to occur within the <ol>, <dl>, <figure>, <ruby>, <object>, <video>, <audio>, <table>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <fieldset>, <select>, <details> elements and <menu> whose type attribute is in popup menu state.
Tag omission Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
Permitted parents <body>, <frameset>, <head>, <dl> and <colgroup> without a span attribute
Permitted ARIA roles None
DOM interface HTMLTemplateElement


This element only includes the global attributes.


First we start with the HTML portion of the example.

<table id="producttable">
    <!-- existing data could optionally be included here -->

<template id="productrow">
    <td class="record"></td>

First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.

Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

  // Instantiate the table with the existing HTML tbody
  // and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.

The result is the original HTML table, with two new rows appended to it via JavaScript:


Specification Status Comment
HTML Living Standard
The definition of 'template element' in that specification.
Living Standard  
The definition of 'template element' in that specification.
Recommendation Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 26 13 22 (22) ? 15 7.1
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? iOS 8

See also