HTMLのtemplateタグとは？属性・使い方・ブラウザー互換性と活用例

<template> は、通常はそのまま表示されないHTMLのひな型。JavaScriptで複製するなどして利用します。この記事では「繰り返すカードのひな型を作る」場面を例に、HTMLの書き方、属性、対応状況、実装時の注意点を確認します。

templateタグの役割と選び方

どんな場面で使うか

内容はtemplate.contentから複製します。複製元のidをそのまま何度も増やすと重複します。宣言的Shadow DOM用属性は通常のtemplate機能と対応を分けて確認します。

開始タグ・終了タグと配置

この教材では開始タグ <template> と終了タグ </template> を明示します。内容や親要素には仕様上の制約があるため、下の例の周囲の構造も含めて確認してください。 HTMLの見た目を変えるときは、意味を持つタグの選択とCSSの指定を分けて考えます。

templateタグの属性

主に使う属性

• shadowrootmode：宣言的Shadow DOMのモード。open・closedを指定します。通常のtemplateの複製とは別の機能です。
• shadowrootdelegatesfocus：宣言的Shadow DOMでフォーカスを内部に委譲する設定です。

共通属性と指定時の注意

• id：文書内で一意な識別子。ラベル、ページ内リンク、JavaScriptからの参照に使います。
• class：CSSやJavaScriptで複数の要素をまとめて選びます。見た目の指定だけでは要素の意味は変わりません。
• lang：その内容の言語。日本語なら ja を指定します。
• data-*：アプリ独自の値を保持します。秘密情報を置く場所ではありません。

真偽属性は「あるか・ないか」で決まります。たとえば disabled="false" は無効化を解除する書き方ではありません。解除したいときは属性を取り除きます。

属性一覧は実用上の主要項目です。歴史的な属性や実験的な拡張まで採用を推奨するものではありません。詳細な定義は末尾の仕様とMDNを確認してください。

活用事例：繰り返すカードのひな型を作る

HTMLのコード例

<template id="course-card">
  <article><h2></h2><p>入門コースです。</p></article>
</template>
<div id="courses"></div>
<script>
  const fragment = document.querySelector('#course-card').content.cloneNode(true);
  fragment.querySelector('h2').textContent = 'HTML';
  document.querySelector('#courses').append(fragment);
</script>

試す手順と確認する結果

HTML入門で作った index.html をコピーして練習用にします。文書設定の例は head、表示する内容の例は body の適切な位置に配置してください。表・フォーム・ルビなどの例は、必要な親要素ごと使います。 保存後に再読み込みし、「繰り返すカードのひな型を作る」という目的に合う構造になったかを開発者ツールのElementsで確認します。ソースとDOMが違う場合は、不正な入れ子によるブラウザーの補正がないか調べます。

例中の example.com は説明用のドメインです。外部ファイルや送信先がある例では、実在する自分のファイル・処理へ置き換えます。HTMLのタグを置くだけで、サーバー処理やファイルが自動生成されることはありません。

templateタグのブラウザー互換性

要素本体の対応開始バージョン

2026年9月21日確認のMDN Browser Compatibility Dataを基にした情報です。以下はデスクトップ版の要素本体の対応開始版で、属性・API・メディア形式まで含めて完全動作を保証する表ではありません。

• Chrome：26以降
• Edge：13以降
• Firefox：22以降
• Safari：8以降

「補足条件あり」「部分対応」の場合は、出典の該当ブラウザーの注記を確認してください。iOS版Safari・Android版Chromeなどは別の実装・配信条件もあるため、下の互換性資料のモバイル欄を確認し、利用対象の実機でも試します。

属性ごとの対応差

要素が使えても、追加された属性は使えない場合があります。以下は今回扱う属性のうち、互換性データに独立した項目があるものです。省略された属性が非対応という意味ではありません。

• shadowrootmode：Chrome 111以降 ／ Edge 共通エンジンのデータを参照（下の出典で確認） ／ Firefox 123以降 ／ Safari 16.4以降。
• shadowrootdelegatesfocus：Chrome 123以降 ／ Edge 共通エンジンのデータを参照（下の出典で確認） ／ Firefox 123以降 ／ Safari 16.4以降。

実装前後のチェック

意味・操作・表示を確認する

• 目的が「繰り返すカードのひな型を作る」に合っているか、タグ名ではなく内容の意味から判断する。
• 属性は対象要素で定義されているものを使い、同名でも別の要素の意味を持ち込まない。
• リンクやフォームを含む場合は、Tab・Enter・Spaceなど標準の操作で利用できるか確認する。
• 320px程度の画面幅や文字拡大時にも、内容や操作部分が欠けないか確認する。
• 新しい属性やAPIを使う場合は、要素本体とは別に対応状況を確認する。

関連する要素と次の学習

• <details> の使い方
• <summary> の使い方
• <dialog> の使い方
• <script> の使い方
• <noscript> の使い方
• <slot> の使い方
• HTMLタグの全体一覧
• CSSプロパティの実例集
• 最初のHTMLを作る手順

参考資料と更新方針

• WHATWGなどの要素仕様
• MDN：template要素
• この記事で確認した互換性データ

互換性情報は確認時点の記録です。データはMDN Browser Compatibility Data（CC0-1.0）を参照しています。ブラウザーの更新や仕様変更があるため、新規導入時にはリンク先の最新情報も確認してください。