Як використовувати тег шаблону в HTML5 з наочними прикладами

Інформатек Діджитал » Ресурси » Як використовувати тег шаблону в HTML5 з наочними прикладами

Якщо ви розробляєте у фронтенді, рано чи пізно ви зіткнетеся з тегом `<template>` як ключовим інструментом для створення та повторного використання фрагментів інтерфейсу без захаращення DOM та витрат на рендеринг. Це місток між традиційним HTML та сучасною динамікою, де контент вводиться за допомогою JavaScript.

Раніше більшість шаблонів розміщувалися на сервері (PHP, Ruby, Python тощо). Сьогодні ми можемо створювати структури повторного використання в браузері, використовуючи такі движки, як Mustache, Handlebars, Nunjucks, або навіть власну логіку за допомогою веб-компонентів , а елемент `<template>` став ідеальною основою: інертний контент, готовий до клонування за потреби.

Що таке тег шаблону та чому він такий корисний?

Тег `<template>` визначає фрагмент HTML-коду, який браузер аналізує, але не відтворює та не виконує , доки ви його не активуєте. Це означає, що ви можете підготувати блок інтерфейсу користувача (рядок таблиці, картку користувача, статтю) та «відображати» його лише за потреби.

На практиці, вміст шаблону не є частиною активного документа: він не відображається у відображеному дереві та не впливає на макет, не запускає завантаження зображень та не виконує скрипти . Все залишається неактивним у властивості JavaScript `template.content`, доки ви не клонуєте та не вставите цей вміст.

Ключові характеристики

Щоб повністю зрозуміти, як він поводиться, корисно переглянути його відмінні риси та те, як вони впливають на потік сторінок, оскільки кожна функція призначена для керування виконанням та рендерингом інтерфейсу користувача.

• Контент аналізується браузером, але не відображається; він залишається невидимим і не займає місця.
• Він інертний: ніщо в шаблоні не запускається та не завантажується (скрипти, зображення, аудіо чи відео), доки ви його не активуєте.
• Він не належить до основного документа: document.getElementById() або querySelector() для документа не знаходить його внутрішні вузли; Ви повинні отримати доступ через template.content.
• Ви можете розмістити його в заголовку, тілі або фреймі з будь-яким дійсним HTML-кодом всередині; його універсальність Це дозволяє створювати складні шаблони без шкоди для початкового рендерингу..

Сумісність браузерів та як визначити підтримку

Підтримка тегу `<template>` доступна в сучасних браузерах вже деякий час: Chrome, Firefox, Safari, Opera та сучасні мобільні браузери обробляють його без проблем; помітною відсутністю є Internet Explorer, який ніколи не реалізовував цей тег . Підтримка поступово впроваджувалася в старіших версіях (Firefox 22+, Chrome 26+, Safari 7.1+, Opera 15+, iOS 8+, Android 4.4+ тощо).

Щоб перевірити, чи середовище належним чином підтримує API, достатньо двох рядків коду. Стандартний метод включає перевірку наявності властивості "content" у щойно створеному елементі шаблону :

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

Хоча нативна підтримка є нормою до 2025 року, старіші браузери все ще можна знайти в корпоративному середовищі; тому доцільно підтримувати захисне виявлення, щоб уникнути порушення інтерфейсу користувача, якщо реалізація відсутня.

Створіть свій перший шаблон зі звичайним HTML

Визначення шаблону таке ж просте, як написання HTML-структури, яку ви хочете повторно використовувати, та обгортання її тегом `<template>`. Зазвичай йому присвоюють описовий ідентифікатор, щоб ви могли знайти його пізніше за допомогою JavaScript та зберегти вміст якомога чистішим та семантичнішим.

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

У цьому прикладі шаблон описує рядок таблиці з трьома порожніми клітинками, які ми заповнимо на льоту. Ви можете розмістити шаблон одразу після таблиці або навіть у розділі head; він не вплине на макет, доки ви не клонуєте та не вставите його.

Активуйте шаблон: importNode, cloneNode та .content

Властивість `content` надає доступ до `DocumentFragment`, який містить усі дані шаблону. Щоб активувати його, звичайним методом є клонування фрагмента та приєднання його до DOM. Саме тут і вступає в гру `document.importNode()` (глибоке клонування) або, пряміше, `template.content.cloneNode(true)` , що є лаконічним та читабельним методом.

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

Або ж можна пропустити `importNode` та клонувати фрагмент безпосередньо: `const clone = t.content.cloneNode(true)` . В обох випадках результатом є дерево, готове до вставки, яке потім можна налаштувати за допомогою тексту, атрибутів, класів або подій, перш ніж включити його у свій документ.

Практичний приклад: заповнення таблиці рядками з шаблону

Класичним прикладом є створення рядків таблиці з фіксованого заголовка. Ви залишаєте заголовок статичним і зберігаєте структуру рядків у `<template>`. Пізніше, використовуючи JavaScript, ви клонуєте рядок необхідну кількість разів і додаєте його в кінець таблиці, заповнюючи кожну клітинку відповідними даними.

<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>

Коли структура готова, просто клонуйте вміст шаблону та вставте його в таблицю. Цей шаблон працює так само з локальними даними або під час обробки віддаленого JSON, оскільки результуючий вузол є стандартним фрагментом DOM, яким можна маніпулювати, як і будь-яким іншим елементом.

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);

Повторіть процес у циклі, і ви отримаєте повну таблицю за мілісекунди. Такий підхід зберігає HTML чистим від логіки та зосереджує динамічну частину в скрипті, покращуючи зручність обслуговування та продуктивність.

Декларативний Shadow DOM із шаблоном: shadowrootmode

Окрім класичного використання, `<template>` дозволяє декларативно створювати Shadow DOM за допомогою атрибута `shadowrootmode`. Якщо ви визначите його з `open` або `closed` всередині контейнера, вміст шаблону буде додано як shadow tree, інкапсулюючи стилі та структуру без необхідності 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>

Важливі деталі: З `shadowrootmode` шаблон більше не є інертним і відображається негайно; внутрішні стилі впливають лише на shadow DOM, а зовнішні елементи `h2` не успадковують цей CSS . Якщо ви використовуєте `closed`, ви не зможете отримати доступ до Shadow DOM з JavaScript, що збільшує ізоляцію.

Цей метод ідеально підходить для ізоляції компонентів та запобігання витокам стилів. Використовуйте його, коли вам потрібна сильна інкапсуляція та ви хочете уникнути залежностей від додаткових бібліотек або середовища виконання, зберігаючи HTML як джерело достовірної інформації.

Сумісність з IE та старішими браузерами: HTML5Shiv та нюанси

Internet Explorer не реалізував `<template>` або його API. За допомогою HTML5Shiv (включено до Modernizr) ви можете "презентувати" невідомі елементи HTML5, але зверніть увагу: це вмикає елемент на рівні розмітки та стилю, а не властивість `.content` або його інертну поведінку.

Практична різниця полягає в тому, що з shiv браузер створює елемент за допомогою `document.createElement()` та застосовує `display:none` за замовчуванням. Це може спричинити короткочасне мерехтіння, якщо стиль зміниться, і, що найважливіше, у вас не буде сучасного API для клонування фрагмента . Для справжньої підтримки вам знадобиться специфічний для шаблону поліфіл або, як варіант, зниження функціональності.

Рекомендовані практики для організації, продуктивності та доступності

Розподіліть шаблони поруч із їхнім цільовим призначенням або у спеціально відведеному розділі (наприклад, в кінці тіла). Уникайте вкладення величезних, нечитабельних шаблонів; натомість використовуйте невеликі, компоновані фрагменти , які можна поєднувати за допомогою JavaScript.

Використовуйте чіткі ідентифікатори (наприклад, "tpl-card-product") та, якщо вам потрібні варіанти, використовуйте атрибути даних та класи. Під час клонування та вставки коригуйте текст за допомогою `textContent` та атрибути за допомогою `setAttribute`, щоб запобігти XSS, особливо якщо дані надходять із сервера.

Щодо продуктивності, пам’ятайте, що зображення всередині `<template>` не завантажуються до активації, що зменшує початкові витрати. Однак, якщо ви збираєтеся клонувати сотні вузлів, робіть це пакетно та завантажуйте підготовлений фрагмент одночасно, щоб мінімізувати перемальовування.

Для забезпечення доступності заповніть ролі та атрибути aria після клонування, якщо ваш шаблон цього вимагає (наприклад, рядки з можливістю вибору, картки з кнопками). І не забувайте про тестування зчитувачів з екрана: нові вузли повинні інтегруватися з фокусом та порядком DOM.

Шаблони HTML5 для початку проектів

Концепція «шаблону» описує повторювані розділи коду, які використовуються як відправна точка. У HTML хороший шаблон містить типи документів, мову, важливі метатеги, стилі та скрипти; це заощаджує ваш час і забезпечує узгодженість на всіх сторінках.

<!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>

Сучасний doctype (<!DOCTYPE html>) активує стандартний режим браузера. Атрибут lang у <html> допомагає з SEO та доступністю, вказуючи основну мову, що сприяє правильній вимові для програм зчитування з екрана.

`meta charset="UTF-8"` – це рекомендоване кодування для підтримки символів практично будь-якої мови. `meta name="viewport"` адаптує ширину до пристрою та блокує масштаб за замовчуванням за допомогою `initial-scale=1`, що є ключем для адаптивних макетів.

Тег `meta http-equiv="X-UA-Compatible" content="ie=edge"` колись вказував на сумісність з IE; сьогодні його вплив мінімальний, але він все ще з'являється в деяких шаблонах. Не забудьте додати `<title>` з описовим заголовком та `<link rel="stylesheet">` до вашого основного CSS.

Щодо скриптів, за замовчуванням розміщуйте посилання безпосередньо перед `</body>`, щоб уникнути блокування рендерингу. Коли вам потрібен критичний JS у `<head>`, намагайтеся зробити його легким, додайте `defer`, де це доречно, та виміряйте вплив на LCP та TTI.

Метадані для SEO та мереж: Open Graph, картки та іконки Twitter

Якщо ваш контент поширюється, варто додати метадані Open Graph та картки Twitter. Ці поля збагачують попередній перегляд (назва, опис, зображення), що може покращити показники кліків у соціальних мережах та месенджерах, а також надати контекст для пошукових систем.

<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" />

Доповніть візуальну ідентичність фавіконами та іконкою Apple Touch, включаючи варіанти SVG та PNG для різних контекстів. Ці елементи невеликі, але вони надають бренду професіоналізму та узгодженості, особливо на мобільних пристроях та вкладках браузера.

Ще одне зауваження: демонстрації та ресурси

Якщо ви хочете побачити повний робочий процес з `<template>` та динамічним клонуванням, на CodePen є публічні приклади, такі як sergiodxa: https://codepen.io/sergiodxa/pen/EaNwVz. Звертаючи увагу на те, як вони організовують HTML, клонують JS та маніпулюють вузлами, ви зможете запровадити чіткі шаблони з самого початку.

Робота з тегом шаблону в HTML5 дозволяє елегантно розділяти структуру та дані, активувати контент за потреби та інкапсулювати його, якщо вам потрібен Shadow DOM — все це позитивно впливає на продуктивність, зручність обслуговування та чистоту коду . У поєднанні з хорошим шаблоном та чітко визначеними метаданими ви отримаєте сучасну основу для масштабованих проектів, де ваш інтерфейс користувача створюється на вимогу без несподіванок.