HTML `<template>`-Tag

Das <template>-Element wird verwendet, um HTML-Codefragmente zu speichern, die geklont und in ein HTML-Dokument eingefügt werden können.

Der Inhalt des Tags ist für Benutzer verborgen. Er wird clientseitig gespeichert. Er bleibt inaktiv, bis er mit JavaScript aktiviert wird.

Der Browser verarbeitet den Inhalt des <template>-Elements während des Ladens der Seite, um sicherzustellen, dass der Code gültig ist.

Vorlagen können überall innerhalb von <head> oder <body> platziert werden und können jede Art von Inhalt enthalten, der in diesen Elementen erlaubt ist.

Das <template>-Tag ist ein neues Element in HTML5.

Alles innerhalb des <template>-Elements wird wie reguläres HTML analysiert. Es gibt jedoch einige Ausnahmen:

Es wird nicht gerendert.
Die <script>-Tags darin werden nicht ausgeführt.
Die <style>-Tags darin werden nicht ausgewertet.
Externe Ressourcen werden nicht gerendert.
Der Inhalt dieses Elements wird nicht als Teil des Dokuments betrachtet. Wenn document.getElementById() oder querySelector() auf der Hauptseite verwendet wird, werden die untergeordneten Knoten einer Vorlage nicht gefunden.

Syntax

Das <template>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<template>) und dem schließenden (</template>) Tag geschrieben.

Beispiel für das HTML `<template>`-Tag:

Beispiel für das HTML <template>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>
     <q>If you tell the truth, you don't have to remember anything.</q>
      ― Mark Twain
    </p>
    <template>
      <h2>This is a second heading.</h2>
      <p>
        “I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
        ― Marilyn Monroe
      </p>
    </template>
  </body>
</html>

Try it Yourself »

Beispiel für das HTML `<template>`-Tag in Kombination mit JavaScript:

Beispiel für das HTML <template>-Tag mit JavaScript:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <template id="myTemplate">
      <p>Template content</p>
    </template>
    <div id="normalContent">
      <p>First paragraph</p>
    </div>
    <!-- JavaScript function clones the template and adds it to the document. -->
    <button onclick="useTemplate();">Show content</button>
    <script>
      function useTemplate() {
        const myTemplate = document.getElementById('myTemplate');
        const normalContent = document.getElementById('normalContent');
        const clonedTemplate = myTemplate.content.cloneNode(true);
        normalContent.appendChild(clonedTemplate);
      }
    </script>
  </body>
</html>

Try it Yourself »

Ergebnis

template example

Das <template>-Tag unterstützt die Globalen Attribute.

Praxis

Welche Funktionalität hat das HTML '<template>'-Tag und wie wird es verwendet?

Das '<template>'-Tag ist eine integrierte API, die automatisch mit verschiedenen Datenbanken verbunden wird.Das '<template>'-Tag wird verwendet, um Sitzungs-Cookies innerhalb eines HTML-Dokuments zu ermöglichen.Das '<template>'-Tag wird in HTML verwendet, um clientseitige Inhalte zu speichern, die beim Laden der Seite nicht angezeigt werden sollen.Das '<template>'-Tag wird in HTML verwendet, um wiederverwendbare Vorlagen für dieselben Objekte zu erstellen.Das '<template>'-Tag in HTML kann vom Benutzer beim Laden der Seite nicht direkt gesehen werden.Das '<template>'-Tag kann jeden Standard-HTML-Inhalt beherbergen, einschließlich weiterer '<template>'-Tags.

HTML <template>-Tag ​

Syntax ​

Beispiel für das HTML <template>-Tag: ​

Beispiel für das HTML <template>-Tag in Kombination mit JavaScript: ​