HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML: <template> タグ

HTMLコンテンツテンプレート（<template>）要素は、ページのロード時に表示されないが、その後JavaScriptを使用してインスタンス化できるクライアント内容のメカニズムを保存するためのものです。テンプレートは、ページのロード時に処理されるが、表示されないように保存される内容の一部として考えられます。<template>要素の内容は、これにより有効性を確認されるだけで、レンダリングされません。

オンライン例

templateタグの使用方法を示します：

例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTMLテンプレートタグの使用（基本チュートリアルウェブ　oldtoolbag.com)</title>
</head>
<body>
<p>テンプレートタグ内の内容はクライアントから隠されています。</p>
<template>
　　<h2>Views</h2>
　　<img　src="views.png">
</template>
<p>後の例では、JavaScriptを使用してテンプレートの内容を表示する方法を示します。</p>
</body>
</html>

テストして見て ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザが<template>タグをサポートしています。

定義と用法

<template>タグはその内容をクライアントから隠します。

<template>タグ内の内容は表示されません。

その後、JavaScriptを使用して内容を表示し、表示できます。

HTMLコードを何度も使用する場合、<template>タグを使用してくださいが、使用するまでに限ります。この操作を<template>タグなしで行うには、ブラウザがコードを表示しないようにHTMLコードをJavaScriptで作成する必要があります。

更多オンライン例

例

<!DOCTYPE　html>
<html>
<body>
<h1>HTMLテンプレートタグの使用（基本チュートリアルウェブ　oldtoolbag.com)</h1>
<p>クリックして、テンプレートからコンテンツを取得し、ウェブページに表示します。</p>
<button　onclick="showContent()">Show　content</button>
<template>
　　<h2>views</h2>
　　<img　src="views.png"　width="300"　height="204">
</template>
<script>
function　showContent()　{
　　var　temp　=　document.getElementsByTagName("template")[0];
　　var　clon　=　temp.content.cloneNode(true);
　　document.body.appendChild(clon);
}
</script>
</body>
</html>

テストして見て ‹/›

HTML 4.01とHTML5の間の違い

<template> タグはHTML5の中の新しいタグ。

グローバル属性

<template> タグがサポート HTMLのグローバル属性。

イベント属性

<template> タグがサポート HTMLのイベント属性。

HTML: <wbr> タグ