<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する

X
f
LINE
B!
p

取り扱い	現行の標準
カテゴリ	メタデータ・コンテンツフロー・コンテンツフレージング・コンテンツ
親にできる要素	メタデータ・コンテンツ、フレージング・コンテンツ、スクリプト対応要素を受け入れる要素。`span`属性を持たない`<colgroup>`
子にできる要素	全ての要素
対応ブラウザ	caniuseで確認

<template>タグの説明

<template>は、ページの読み込み時には描画されないコンテンツの断片を、後にJavaScriptを使用してアクティベート可能な状態でマークアップすることを可能にするタグです。要するに、同じようなコンテンツを毎回作り直す必要がないように、「テンプレート」の機能を提供するものです。

<template>タグの特徴

この要素に囲まれた部分は、ページ読み込み時に自律動作しません。つまり、この範囲内にマークアップされたは箇所は、隠れたDOMとして保存され、呼び出されるまで表示されません。
テンプレート内のコンテンツは、アクティベートされるまでドキュメント内に存在しないものとして扱われます。よって、画像や動画、音声はロードされませんし、スクリプトは動作しません。
<template>は、<head>、<body>、<frameset>内であれば、どこにでも置くことができます（コンテンツモデルの子要素以外）。そして、その中に置けるコンテンツであれば、何を置いても構いません。
テンプレートを使うには、JavaScriptでアクティベート（有効化）する必要があります。

<template>に指定できる主な属性

グローバル属性: 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ: 全てのHTML要素に指定できるコンテンツ属性です。

<template>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

HTML

<template id="mytemplate">
	<img src="" alt="Your Image">
	<div class="comment"></div>
</template>

<script>
	var t = document.querySelector('#mytemplate');
	t.content.querySelector('img').src = 'yourimage.png';
	var clone = document.importNode(t.content, true);
	document.body.appendChild(clone);
</script>