目次に戻る

template要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • なし。
  • 補足:下記の結果として、当該要素内容に何が書いてあったとしても、上記の「なし」に違反するという取り扱いを受けないことになる。
    • 当該要素内容は、当該要素子孫要素内容テキストとして扱われない(当該要素内容は、HTML文書の構成部分とはならず、独立した別個のオブジェクトとなる)。
    • 当該要素内容は、HTML構文又はXML構文として必要とされる要件を除いて、準拠性のチェックを受けない。
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
視覚系ブラウザデフォルトとして期待されるCSS

  template {display: none;}
  
準拠チェッカーに対する規定
  • 当該要素内容は、HTML構文又はXML構文として必要とされる要件を除いて、準拠チェッカーのチェック対象にならない。例えば、属性値仕様に合致しない記載でもチェックされずにスルーされるし、仕様上は必須な属性仕様上は必須な子要素などを記載してなくてもスルーされる。しかし、開始タグ終了タグが互い違いになっていて要素入れ子関係が正しくない場合などは、エラー判定される。
意味・用法

スクリプトによってHTML文書に挿入され又は複製されうるところの、HTML断片を記述するために、用いられる。

当該要素内容は、レンダリングされない。

アクセシビリティ関連

私見・補足

テンプレートを表す。

この要素内容として配置されている諸要素は、その内容属性属性値が不完全であることが想定されており、それらをスクリプトで操作することによって十全なものとしてから、HTML文書の適宜の場所に挿入・複製する。

未対応ブラウザでは当該要素内容が表示されてしまうので、未対応ブラウザを考慮するなら、使用には注意が必要。

内容モデルの補足:現実問題としては、下記の点を遵守しないと不具合が出るだろうと思われる。

表示確認

ソース1

  <div>下記に記載しているテンプレートは表示されないはず。</div>
  <template>
  <td>テンプレ</td>
  </template>
  
表示結果1
下記に記載しているテンプレートは表示されないはず。

未対応ブラウザにおいては、内容が表示されてしまう。

IE6表示のスクリーンショット
IE6表示:内容が表示されてしまっている

IE7からIE11も同様。

ソース2

  <ul id="rekkyo">
    <template id="tem"><li>番目</li></template>
  </ul>
  <script>
    for (let i = 1; i <= 5; i++) {
      const xxx = document.getElementById('tem').content.cloneNode(true);
      xxx.firstChild.textContent = i + xxx.firstChild.textContent;
      document.getElementById("rekkyo").appendChild(xxx);
    }
  </script>
  
表示結果2