ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
親にできる要素 <head> <body> <frameset> およびspan属性を持たない <colgroup>
子にできる要素 メタデータコンテンツ
フローコンテンツ
次の要素内で許可されている有効なHTMLコンテンツ:<ol> <dl> <figure> <ruby> <object> <video> <audio> <table> <colgroup> <thead> <tbody> <tfoot> <tr> <fieldset> <select> <details>
および、type属性がポップアップメニュー内に書かれた <menu>
対応ブラウザ <template>の対応状況を確認する

<template>タグの説明

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

<template>タグの特徴

<template>〜</template>で囲まれた部分は、ページ読み込み時に自律動作しません。つまり、この範囲内にマークアップされたは箇所は、隠れたDOMとして存在するだけで、レンダリングされないのです。

テンプレート内のコンテンツは、アクティベートされるまでドキュメント内に存在しないものとして扱われます。よって、画像や動画、音声はロードされませんし、スクリプトは動作しません。

<template>は、<head>、<body>、<frameset>内であれば、どこにでも置くことができます(コンテンツモデルの子要素以外)。そして、その中に置けるコンテンツであれば、何を置いても構いません。

テンプレートを使うには、JavaScriptでアクティベート(有効化)する必要があります。

<template>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

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

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

コンテンツグループ要素
<blockquote> 引用文であることを表す(長文用)
<dd> 定義した用語の説明を記述する
<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
<div> ブロックレベル要素としての範囲を指定
<dl> 定義リストであることを表す
<dt> 定義する用語を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<figure> 写真や図表などの自己完結した要素を表す
<hr> 区切り線(罫線)を引く
<li> リストの項目を表示する
<menu> リストをメニューとして扱う
<ol> 順序のあるリストを定義する
<p> 段落を指定する
<pre> ソースを整形済みテキストとして表示する
<summary> 詳細内容(<details>)の要約や概要を設定する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<ul> 順序のないリストを定義する