HTML <template> Etiketi

HTML <template> etiketi, sayfa yüklendiği esnada arka planda çalışacak(istemci taraflı) içeriği saklar. JavaScript kullanılarak başlatılabilir.

Şablon içeriği, JavaScript ile etkin oluncaya kadar gösterilmez. Tarayıcı, içeriğin geçerli olduğundan emin olduğu esnada <template> öğesinin içeriğini işlese de yine de içerik belirli bir süre oluşturulmaz. Diğer bir  kullanım alanı ise HTML belgenizde aynı içeriği değişiklik yapmadan kullanacağınız zaman ortaya çıkar.

HTML <template> etiketi; <head>, <body>, <frameset> veya <table> etiketleri içerisinde herhangi bir alanda kullanılabilir. HTML 5 ile hayatımıza giren bir etikettir.

 

Söz dizimi:

<template>.........</template>  

 

Özellikleri:

Görüntüleme
Etiketi Başlat/ Etiketi Bitir
Kullanımı
Yok
Hem Başlangıç Hem Bitiş
Biçimlendirme

 

Örnek:

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML Template tag</title>  
<style>  
body{  
  background-color: #e6e6fa;  
}  
</style>  
</head>  
<body>  
  <h2>HTML template Etiketi</h2>  
  <button onclick="clickMe()">Butona Tıkla</button><br>  
    
 <template id="mytemplate">  
   <img src="https://www.lifeacode.com/wp-content/uploads/2018/09/90-4.png" alt="bird's image" height="100" width="100">  
   <script>  
   alert("Resime ulaşılamıyor.")  
   </script>  
  </template>  
  
<script>  
   function clickMe() {  
    var x= document.getElementsByTagName("template")[0];  
    var clon = x.content.cloneNode(true);  
    document.body.appendChild(clon);}  
</script>  
</body>  
</html>  

Ekran Çıktısı:

HTML Template tag

HTML template Etiketi


 

Tarayıcı Desteği:



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir