Balise HTML `<template>`

La balise <template> est utilisée pour stocker des fragments de code HTML, qui peuvent être clonés et insérés dans un document HTML.

Le contenu de la balise est masqué aux utilisateurs. Il est stocké côté client. Il reste inerte jusqu'à son activation via JavaScript.

Le navigateur traite le contenu de l'élément <template> lors du chargement de la page afin de garantir la validité du code.

Les modèles peuvent être placés n'importe où à l'intérieur de <head> ou <body>, et peuvent contenir tout type de contenu autorisé dans ces éléments.

La balise <template> est un nouvel élément introduit dans HTML5.

Tout ce qui se trouve dans l'élément <template> est analysé comme du HTML standard. Cependant, il existe quelques exceptions :

Il n'est pas rendu.
Les balises <script> qu'il contient ne sont pas exécutées.
Les balises <style> qu'il contient ne sont pas évaluées.
Les ressources externes ne sont pas rendues.
Le contenu de cet élément n'est pas considéré comme faisant partie du document. Si document.getElementById() ou querySelector() est utilisé sur la page principale, les nœuds enfants d'un modèle ne seront pas trouvés.

Syntaxe

La balise <template> s'écrit par paire. Le contenu est écrit entre les balises d'ouverture (<template>) et de fermeture (</template>).

Exemple de la balise HTML `<template>` :

Exemple de la balise HTML <template>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>
     <q>If you tell the truth, you don't have to remember anything.</q>
      ― Mark Twain
    </p>
    <template>
      <h2>This is a second heading.</h2>
      <p>
        “I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
        ― Marilyn Monroe
      </p>
    </template>
  </body>
</html>

Try it Yourself »

Exemple de la balise HTML `<template>` utilisée avec JavaScript :

Exemple de la balise HTML <template> avec JavaScript :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <template id="myTemplate">
      <p>Template content</p>
    </template>
    <div id="normalContent">
      <p>First paragraph</p>
    </div>
    <!-- JavaScript function clones the template and adds it to the document. -->
    <button onclick="useTemplate();">Show content</button>
    <script>
      function useTemplate() {
        const myTemplate = document.getElementById('myTemplate');
        const normalContent = document.getElementById('normalContent');
        const clonedTemplate = myTemplate.content.cloneNode(true);
        normalContent.appendChild(clonedTemplate);
      }
    </script>
  </body>
</html>

Try it Yourself »

Résultat

template example

La balise <template> prend en charge les Attributs globaux.

Pratique

Quelle est la fonctionnalité de la balise HTML '<template>' et comment est-elle utilisée ?

La balise '<template>' est une API intégrée qui se lie automatiquement à diverses bases de données.La balise '<template>' est utilisée pour autoriser les cookies de session dans un document HTML.La balise '<template>' est utilisée en HTML pour stocker du contenu côté client que vous ne souhaitez pas afficher lors du chargement de la page.La balise '<template>' est utilisée en HTML pour créer des modèles réutilisables des mêmes objets.La balise '<template>' en HTML ne peut pas être directement vue par l'utilisateur lors du chargement de la page.La balise '<template>' peut héberger n'importe quel HTML standard, y compris d'autres balises '<template>'.

Balise HTML <template> ​

Syntaxe ​

Exemple de la balise HTML <template> : ​

Exemple de la balise HTML <template> utilisée avec JavaScript : ​