Comment utiliser la balise template en HTML5 avec des exemples clairs

Actualités numériques » Ressources » Comment utiliser la balise template en HTML5 avec des exemples clairs

Si vous développez en front-end, vous rencontrerez tôt ou tard la balise `<template>`, un outil essentiel pour composer et réutiliser des fragments d'interface sans encombrer le DOM ni engendrer de coûts de rendu. Elle fait le lien entre le HTML traditionnel et les dynamiques modernes où le contenu est injecté via JavaScript.

Auparavant, la plupart des modèles résidaient sur le serveur (PHP, Ruby, Python, etc.). Aujourd'hui, nous pouvons créer des structures réutilisables dans le navigateur grâce à des moteurs comme Mustache, Handlebars, Nunjucks, ou même une logique personnalisée avec les Web Components , et l'élément `<template>` est devenu la base idéale : un contenu inerte, prêt à être dupliqué au besoin.

Qu'est-ce que la balise template et pourquoi est-elle si utile ?

La balise `<template>` définit un extrait de code HTML que le navigateur analyse mais n'affiche ni n'exécute tant que vous ne l'activez pas. Vous pouvez ainsi préparer un bloc d'interface utilisateur (une ligne de tableau, une fiche utilisateur, un article) et ne l'afficher qu'en cas de besoin.

En pratique, le contenu du modèle ne fait pas partie du document actif : il n’apparaît pas dans l’arborescence rendue et n’affecte ni la mise en page, ni le chargement des images, ni l’exécution des scripts . Tout reste inactif dans la propriété JavaScript `template.content` jusqu’à ce que vous cloniez et insériez ce contenu.

Caractéristiques principales

Pour bien comprendre son fonctionnement, il est utile d'examiner ses caractéristiques distinctives et leur impact sur le flux de la page, car chaque caractéristique est conçue pour contrôler l'exécution et le rendu de l'interface utilisateur.

• Le contenu est analysé par le navigateur, mais il n'est pas affiché ; il reste invisible et n'occupe aucun espace.
• Il est inerte : rien dans le modèle ne s'exécute ni ne se charge (scripts, images, audio ou vidéo) tant que vous ne l'activez pas.
• Il n'appartient pas au document principal : un document.getElementById() ou une requête Selector() sur le document ne trouve pas ses nœuds internes ; Vous devez y accéder via template.content.
• Vous pouvez le placer dans l'en-tête, le corps ou un cadre, avec n'importe quel code HTML valide à l'intérieur ; sa polyvalence Il vous permet de concevoir des modèles complexes sans pénaliser le rendu initial..

Compatibilité des navigateurs et comment détecter la prise en charge

La prise en charge de la balise `<template>` est disponible depuis un certain temps dans les navigateurs modernes : Chrome, Firefox, Safari, Opera et les navigateurs mobiles actuels la gèrent sans problème ; Internet Explorer fait figure d’exception, n’ayant jamais implémenté cette balise . La prise en charge a été déployée progressivement dans les versions plus anciennes (Firefox 22+, Chrome 26+, Safari 7.1+, Opera 15+, iOS 8+, Android 4.4+, etc.).

Pour vérifier si l'environnement prend correctement en charge l'API, deux lignes de code suffisent. La technique standard consiste à vérifier l'existence de la propriété « content » dans un élément de modèle nouvellement créé :

if ("content" in document.createElement("template")) {
  // Soporte nativo disponible
} else {
  // Toca usar un polyfill o estrategia alternativa
}

Bien que la prise en charge native soit la norme d'ici 2025, on trouve encore des navigateurs plus anciens dans les environnements d'entreprise ; par conséquent, il est conseillé de maintenir une détection défensive pour éviter de perturber l'interface utilisateur en cas d'absence d'implémentation.

Créez votre premier modèle avec du HTML classique.

Définir un modèle est aussi simple que d'écrire la structure HTML que vous souhaitez réutiliser et de l'encapsuler dans une balise `<template>`. Il est courant de lui attribuer un identifiant descriptif afin de pouvoir le retrouver ultérieurement avec JavaScript et de conserver un contenu aussi clair et sémantique que possible.

<template id="plantilla-fila">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

Dans cet exemple, le modèle décrit une ligne de tableau avec trois cellules vides que nous remplirons dynamiquement. Vous pouvez placer le modèle juste après le tableau ou même dans l'en-tête ; il n'affecte pas la mise en page tant que vous ne le clonez pas et ne l'insérez pas.

Activer un modèle : importNode, cloneNode et .content

La propriété `content` expose un `DocumentFragment` contenant tout le contenu du modèle. Pour l'activer, la méthode habituelle consiste à cloner le fragment et à l'attacher au DOM. C'est là qu'interviennent `document.importNode()` (clonage profond) ou, plus directement, `template.content.cloneNode(true)` , une méthode concise et lisible.

const t = document.querySelector("#plantilla");
const fragmento = document.importNode(t.content, true);
fragmento.querySelector("h1").textContent = "Hola desde template";
document.body.appendChild(fragmento);

Vous pouvez également omettre `importNode` et cloner directement le fragment : `const clone = t.content.cloneNode(true)` . Dans les deux cas, vous obtenez un arbre prêt à être injecté, que vous pouvez ensuite personnaliser avec du texte, des attributs, des classes ou des événements avant de l’intégrer à votre document.

Exemple pratique : compléter un tableau avec des lignes provenant d’un modèle

Un exemple classique consiste à générer des lignes de tableau à partir d'un en-tête fixe. L'en-tête reste statique et la structure de la ligne est enregistrée dans un `<template>`. Ensuite, en JavaScript, la ligne est dupliquée autant de fois que nécessaire et ajoutée à la fin du tableau, chaque cellule étant remplie avec les données appropriées.

<table id="data">
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Calificación</th>
  </tr>
  <template id="user">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </template>
</table>

Une fois la structure prête, il suffit de cloner le contenu du modèle et de l'insérer dans le tableau. Ce procédé fonctionne de la même manière avec des données locales ou lors de la navigation dans un JSON distant, car le nœud résultant est un fragment DOM standard que vous pouvez manipuler comme n'importe quel autre élément.

const table = document.querySelector("#data");
const userTemplate = document.querySelector("#user");
const clonedRow = userTemplate.content.cloneNode(true);
// Aquí podrías ajustar los textos de las celdas según tus datos
// clonedRow.querySelectorAll("td")[0].textContent = "Ada";
// clonedRow.querySelectorAll("td")[1].textContent = "Lovelace";
// clonedRow.querySelectorAll("td")[2].textContent = "10";
table.appendChild(clonedRow);

Répétez l'opération en boucle et vous obtiendrez votre tableau complet en quelques millisecondes. Cette approche préserve la clarté du code HTML et concentre la partie dynamique dans le script, améliorant ainsi la maintenabilité et les performances.

Shadow DOM déclaratif avec modèle : shadowrootmode

Outre son utilisation classique, `<template>` permet de créer un Shadow DOM de manière déclarative grâce à l'attribut `shadowrootmode`. Si vous le définissez avec `open` ou `closed` dans un conteneur, le contenu du modèle est attaché sous forme d'arbre Shadow, encapsulant les styles et la structure sans nécessiter de JavaScript.

<h2>Soy el título externo</h2>
<div class="container">
  <template shadowrootmode="open">
    <style>h2 { color: red; }</style>
    <h2>Soy el título interno</h2>
  </template>
</div>

Détails importants : Avec `shadowrootmode`, le modèle n’est plus inactif et s’affiche immédiatement ; les styles internes n’affectent que le Shadow DOM, et les éléments `h2` externes n’héritent pas de ce CSS . Si vous utilisez `closed`, vous ne pourrez pas accéder au Shadow DOM depuis JavaScript, ce qui renforce l’isolation.

Cette technique est idéale pour isoler les composants et éviter les fuites de style. Utilisez-la lorsque vous avez besoin d'une encapsulation forte et souhaitez éviter les dépendances à des bibliothèques ou à un environnement d'exécution supplémentaires, en conservant le HTML comme source de vérité.

Compatibilité avec IE et les navigateurs plus anciens : HTML5Shiv et nuances

Internet Explorer n'implémentait pas `<template>` ni son API. Avec HTML5Shiv (inclus dans Modernizr), vous pouvez « présenter » des éléments HTML5 inconnus, mais attention : cela active l'élément au niveau du balisage et du style, et non la propriété `.content` ni son comportement inerte.

La différence pratique réside dans le fait qu'avec shiv, le navigateur crée l'élément via `document.createElement()` et applique `display:none` par défaut. Cela peut provoquer un bref scintillement lors d'un changement de style et, surtout, vous ne disposerez pas de l'API moderne pour cloner le fragment . Pour une prise en charge complète, un polyfill spécifique au modèle serait nécessaire, ou bien une fonctionnalité de rétrogradation serait requise.

Bonnes pratiques en matière d'organisation, de performance et d'accessibilité

Répartissez les modèles à proximité de leur utilisation prévue ou dans une section dédiée (par exemple, à la fin du corps du document). Évitez d'imbriquer des modèles volumineux et illisibles ; utilisez plutôt de petits éléments composables que vous pouvez combiner avec JavaScript.

Utilisez des identifiants clairs (par exemple, « tpl-card-product ») et, si vous avez besoin de variantes, utilisez des attributs et des classes de données. Lors du clonage et de l’insertion, ajustez le texte avec `textContent` et les attributs avec `setAttribute` pour prévenir les attaques XSS, en particulier si les données proviennent du serveur.

En termes de performances, n'oubliez pas que les images contenues dans le modèle ne sont chargées qu'à l'activation, ce qui réduit le coût initial. Cependant, si vous clonez des centaines de nœuds, procédez par lots et téléchargez le fragment préparé en une seule fois afin de minimiser les redessinages.

Pour garantir l'accessibilité, renseignez les rôles et les attributs aria après le clonage si votre modèle l'exige (par exemple, lignes sélectionnables, cartes avec boutons). N'oubliez pas non plus les tests de compatibilité avec les lecteurs d'écran : les nouveaux nœuds doivent s'intégrer à l'ordre et au focus du DOM.

Modèles HTML5 standard pour démarrer des projets

Le concept de « code de base » désigne les sections de code répétitives qui servent de point de départ. En HTML, un bon code de base comprend les doctypes, la langue, les balises méta essentielles, les styles et les scripts ; il permet de gagner du temps et garantit la cohérence entre les pages.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

La balise doctype moderne (<!DOCTYPE html>) active le mode standard du navigateur. L'attribut lang dans la balise <html> contribue au référencement naturel et à l'accessibilité en indiquant la langue principale, ce qui facilite la prononciation correcte pour les lecteurs d'écran.

`meta charset="UTF-8"` est l'encodage recommandé pour prendre en charge les caractères et symboles de pratiquement toutes les langues. `meta name="viewport"` adapte la largeur à l'appareil et verrouille le zoom par défaut avec `initial-scale=1`, essentiel pour les mises en page réactives.

La balise `meta http-equiv="X-UA-Compatible" content="ie=edge"` indiquait autrefois la compatibilité avec Internet Explorer ; aujourd’hui, son impact est minime, mais elle apparaît encore dans certains modèles. N’oubliez pas la balise `<title>` avec un titre descriptif et une balise `<link rel="stylesheet">` vers votre CSS principale.

Concernant les scripts, par défaut, placez vos références juste avant `</body>` pour éviter de bloquer le rendu. Si vous avez besoin de code JS critique dans `<head>`, essayez de le rendre léger, ajoutez `defer` lorsque c'est pertinent et mesurez l'impact sur le LCP et le TTI.

Métadonnées pour le référencement et les réseaux : Open Graph, Twitter Cards et icônes

Si votre contenu est partagé, il est conseillé d'ajouter des métadonnées Open Graph et des Twitter Cards. Ces champs enrichissent l'aperçu (titre, description, image), ce qui peut améliorer les taux de clics sur les réseaux sociaux et les applications de messagerie, et fournir un contexte aux moteurs de recherche.

<meta property="og:title" content="Template HTML5 básico" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.ejemplo.com/pagina" />
<meta property="og:description" content="Template HTML5 para proyectos" />
<meta property="og:image" content="/images/ogimage.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tuusuario" />
<meta name="twitter:creator" content="@autoria" />

Complétez l'identité visuelle avec des favicons et une icône Apple Touch, disponibles aux formats SVG et PNG pour s'adapter aux différents contextes. Ces éléments, bien que petits, confèrent professionnalisme et cohérence à la marque, notamment sur les appareils mobiles et les onglets de navigateur.

Remarque supplémentaire : démos et ressources

Si vous souhaitez voir un flux de travail complet avec `<template>` et le clonage dynamique, vous trouverez des exemples publics sur CodePen, comme celui de sergiodxa : https://codepen.io/sergiodxa/pen/EaNwVz. Observer comment ils organisent le HTML, le JS de clonage et la manipulation des nœuds vous aidera à adopter de bonnes pratiques dès le départ.

L'utilisation de la balise template en HTML5 permet de séparer élégamment la structure et les données, d'activer le contenu à la demande et de l'encapsuler si un Shadow DOM est requis, le tout avec un impact positif sur les performances, la maintenabilité et la clarté du code . Associée à un bon modèle de code et à des métadonnées bien définies, elle offre une base moderne pour des projets évolutifs où l'interface utilisateur est composée à la demande, sans surprise.