templateタグ -HTML のテンプレートを定義する｜HTML辞典

<template>タグとは？

<template> タグは、HTML のテンプレートを定義するためのタグです。
JavaScript を使って動的にコンテンツを挿入する際に利用されます。
ページのロード時には表示されず、スクリプトで操作することでコンテンツを動的に生成できます。

コンテンツモデル

メタデータコンテンツ（Metadata Content）。

閉じタグの有無

<template> は 開始タグ（<template>）と閉じタグ（</template>）の両方が必要 です。

基本的な記述方法

<template id="myTemplate">
    <p>これはテンプレートの内容です。</p>
</template>

<script>
    let template = document.getElementById("myTemplate");
    let clone = template.content.cloneNode(true);
    document.body.appendChild(clone);
</script>

使用できる主な属性

<template> タグには特別な属性はありません。

CSSを使ったデザイン変更

<template> 内の要素は通常の HTML と同じように CSS でデザインできます。

p {
    color: blue;
    font-weight: bold;
}

適切な使用例

✅ JavaScript で動的にコンテンツを追加

<template id="cardTemplate">
    <div class="card">
        <h2>タイトル</h2>
        <p>詳細情報</p>
    </div>
</template>

<script>
    let template = document.getElementById("cardTemplate");
    let clone = template.content.cloneNode(true);
    document.body.appendChild(clone);
</script>

✅ リストアイテムを動的に追加

<template id="listTemplate">
    <li>リストの項目</li>
</template>

<ul id="list"></ul>

<script>
    let template = document.getElementById("listTemplate");
    let clone = template.content.cloneNode(true);
    document.getElementById("list").appendChild(clone);
</script>

適切でない使用例（誤った使い方）

❌ <template> の中の要素はそのまま表示されないため、直接書いても意味がない

<!-- NG: そのまま書いても表示されない -->
<template>
    <p>この文章は表示されません。</p>
</template>

✅ 正しい書き方（JavaScript で表示）

<template id="temp">
    <p>これはテンプレートの内容です。</p>
</template>

<script>
    let template = document.getElementById("temp");
    let clone = template.content.cloneNode(true);
    document.body.appendChild(clone);
</script>

<template>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<template>	HTML テンプレートを定義	JavaScript で操作するまで表示されない	動的コンテンツの準備
<div>	ブロック要素をグループ化	そのまま表示される	静的なコンテンツのグループ化
<script>	JavaScript を記述	JavaScript のコードを実行する	動的な処理の実装

使用上の注意点

✅ <template> 内の要素は JavaScript で操作しないと表示されない

• <template> 内の内容は、ページのロード時には表示されない。

✅ content.cloneNode(true) を使って複製し、表示する

• document.body.appendChild(clone); でページに追加する。

関連タグ

• <script> – JavaScript を記述
• <div> – 静的なコンテンツをグループ化
• <span> – インラインのテキスト装飾

まとめ

<template> タグは、HTML文書内で JavaScript を使って動的にコンテンツを生成するためのタグ です。
JavaScript を活用してテンプレートを複製・追加し、動的な UI を作成する際に便利です。