<template>の解説|クロノドライブのHTML5辞典

<template>

対応ブラウザ Chrome 26~ / Firefox 22.0~ / Opera 15.0~ / Android 4.4~
タグの分類 メタデータ・コンテンツ
フロー・コンテンツ
フレージング・コンテンツ
スクリプトサポート要素
含められるもの 下記のいずれかが含められるものと同じ
  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • <ol>と<ul>
  • <dl>
  • <figure>
  • <ruby>
  • <object>
  • <video>と<audio>
  • <table>
  • <colgroup>
  • <thead>、<tbody>、<tfoot>
  • <tr>
  • <fieldset>
  • <select>
  • <details>
使える場所 メタデータ・コンテンツを使える場所
フレージング・コンテンツを使える場所
スクリプトサポート要素を使える場所
span属性を持たない<colgroup>要素の子要素として
用例 <table>
<tr>
<th>書名</th><th>作者</th><th>出版社</th><th>発行年月日</th><th>ISBNコード</th>
</tr>
<template id="row">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</template>
</table>

<template>とは

「template」とは、スクリプトから利用されるHTMLの一部を記述するために使用するタグです。<template>~</template>の間に書かれた内容は、そのままでは表示されません。

HTM4までは、ページの一部をAjaxで取得して文書へ追加する際など、マークアップはスクリプト側に埋め込むしかありませんでした。<template>タグを使うことで、文書がロードされた時点では使われず、スクリプトによって後から動的に追加する内容のマークアップを、文書側の実際に使われる場所へ記述することができます。

スクリプトによって有効化されるまで、<template>の内容は文書の一部とはみなされません。たとえば<form>の中に<input>を含む<template>を書き、フォームがsubmitされた場合、その<template>内の<input>は<template>が有効化されていない限り送信されません。