Manuale di riferimento HTML

Completo elenco dei tag HTML

HTML: <template> etichetta

L'elemento HTML (template) è una meccanismo di contenuto client, il cui contenuto non viene visualizzato durante il caricamento della pagina, ma può essere istanzionato con JavaScript durante l'esecuzione. Vedere il modello come un frammento di contenuto che può essere memorizzato nel documento per un utilizzo futuro. Anche se l'analizzatore di contenuti lo elabora durante il caricamento della pagina, lo fa solo per garantire che il contenuto sia valido; tuttavia, il contenuto dell'elemento non viene visualizzato.

Esempi online

Esempio di come utilizzare il tag template:

Esempio

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Utilizzo del tag HTML template (Sito di base tutoriali oldtoolbag.com)</title>
</head>
<body>
<p>Il contenuto all'interno del tag template è nascosto dal client.</p>
<template>
　　<h2>Visualizzazioni</h2>
　　<img src="views.png">
</template>
<p>Un esempio successivo ti mostrerà come utilizzare JavaScript per visualizzare il contenuto del modello.</p>
</body>
</html>

Prova a vedere ‹/›

Compatibilità dei browser

IEFirefoxOperaChromeSafari

Tutti i browser mainstream supportano il tag <template>.

Definizione e uso

Il tag <template> nasconde il suo contenuto dal client.

Il contenuto all'interno del tag <template> non viene visualizzato.

In futuro, è possibile rendere visibile e presentare il contenuto utilizzando JavaScript.

Quando si desidera utilizzare più volte il codice HTML, utilizzare il tag <template>, ma solo quando necessario. Per eseguire questa operazione senza il tag <template>, è necessario utilizzare JavaScript per creare il codice HTML, per prevenire che il browser lo visualizzi.

Più esempi online

Esempio

<!DOCTYPE html>
<html>
<body>
<h1>Utilizzo del tag HTML template (Sito di base tutoriali oldtoolbag.com)</h1>
<p>Clicca sul pulsante per ottenere il contenuto da un modello e visualizzarlo nella pagina web.</p>
<button onclick="showContent()">Mostra contenuto</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>

Prova a vedere ‹/›

Differenze tra HTML 4.01 e HTML5

<template> etichetta è una nuova etichetta in HTML5.

Proprietà globali

Supporto <template> etichetta Proprietà globali HTML.

Proprietà degli eventi

Supporto <template> etichetta Proprietà degli eventi HTML.

HTML: <wbr> etichetta