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

取り扱い 現行の標準
カテゴリ メタデータ・コンテンツ
フロー・コンテンツ
フレージング・コンテンツ
親にできる要素 メタデータ・コンテンツ、フレージング・コンテンツ、スクリプト対応要素を受け入れる要素。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>

<template>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する