HTML Tutorial

HTML-tagg: <template>

Användning av <template>

  • Container för HTML-kod som inte visas direkt.
  • Kan användas för att skapa återanvändbara mallar.

Attribut för <template>

  • Inga attribut stöds för närvarande.

Exempel med <template>

<script id="my-template" type="template">
  <h1>Rubrik</h1>
  <p>Paragraf</p>
</script>

Utforska <template>-taggen

För att använda <template>-taggen, skapa ett <template>-element med ett unikt "id". Lägg sedan till önskad HTML-kod inuti <template>-elementet. Använd sedan JavaScript för att hämta och infoga mallinnehållet någon annanstans i dokumentet.

Exempel på kod:

<template id="my-template">
  <h1>Rubrik</h1>
  <p>Paragraf</p>
</template>

<script>
  // Hämta mallinnehåll
  let template = document.getElementById('my-template').content;

  // Infoga mall i dokumentet
  document.body.appendChild(template);
</script>

Förbättrad tillgänglighet och användbarhet

  • <template>-taggen kan förbättra tillgängligheten genom att gömma oanvänd HTML-kod från skärmläsare.
  • Den ökar också användbarheten genom att tillåta dynamisk inmatning av mallinnehåll.