HTML-тег `<template>`

Тег <template> используется для хранения фрагментов HTML-кода, которые можно клонировать и вставлять в HTML-документ.

Содержимое тега скрыто от пользователей. Оно хранится на стороне клиента. Оно неактивно, пока не будет активировано с помощью JavaScript.

Браузер обрабатывает содержимое элемента <template> при загрузке страницы, чтобы убедиться в корректности кода.

Шаблоны можно размещать в любом месте внутри <head> или <body>, и они могут содержать любой тип контента, разрешенный в этих элементах.

Тег <template> является новым элементом в HTML5.

Всё содержимое элемента <template> парсится как обычный HTML. Однако есть несколько исключений:

Оно не отображается.
Теги <script> внутри него не выполняются.
Теги <style> внутри него не обрабатываются.
Внешние ресурсы не отображаются.
Содержимое этого элемента не считается частью документа. Если на основной странице используется document.getElementById() или querySelector(), дочерние узлы шаблона не будут найдены.

Синтаксис

Тег <template> является парным. Содержимое записывается между открывающим (<template>) и закрывающим (</template>) тегами.

Пример использования HTML-тега `<template>`:

Пример использования 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 »

Пример использования HTML-тега `<template>` с JavaScript:

Пример использования HTML-тега <template> с 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 »

Результат

пример работы тега template

Тег <template> поддерживает глобальные атрибуты.

Практика

В чём заключается функциональность HTML-тега '<template>' и как он используется?

Тег '<template>' — это встроенный API, который автоматически подключается к различным базам данных.Тег '<template>' используется для разрешения работы session cookies внутри HTML-документа.Тег '<template>' в HTML используется для хранения клиентского контента, который не нужно отображать при загрузке страницы.Тег '<template>' в HTML используется для создания многоразовых шаблонов одинаковых объектов.Тег '<template>' в HTML не виден пользователю напрямую при загрузке страницы.Тег '<template>' может содержать любой стандартный HTML, включая другие теги '<template>'.

HTML-тег <template> ​

Синтаксис ​

Пример использования HTML-тега <template>: ​

Пример использования HTML-тега <template> с JavaScript: ​