English

<template>

Préparer du HTML invisible, prêt à apparaître quand JavaScript le décide

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique

<template> — Le gabarit inerte

La balise <template> contient du HTML qui n'est ni affiché ni exécuté par le navigateur. Son contenu vit dans un DocumentFragment jusqu'à ce que JavaScript le clone et l'insère dans le DOM. C'est la base des Web Components.

Quand l'utiliser

Tu veux définir un fragment de HTML réutilisable : une ligne de tableau à cloner, un gabarit de carte produit, ou la structure interne d'un Web Component. Le contenu du <template> ne sera jamais affiché tant que tu ne le clones pas explicitement.

Ce que tu gagnes

Accessibilité : le contenu d'un <template> est ignoré par les lecteurs d'écran, c'est le comportement attendu. Une fois cloné dans le DOM, le fragment cloné est accessible normalement.

Exemple de code

<template id="row-template">
  <tr>
    <td class="name"></td>
    <td class="score"></td>
  </tr>
</template>
 
<script>
  const template = document.getElementById('row-template');
  const clone = template.content.cloneNode(true);
  clone.querySelector('.name').textContent = 'Alice';
  clone.querySelector('.score').textContent = '42';
  document.querySelector('tbody').appendChild(clone);
</script>

Pour aller plus loin