جلسه پنجاه و چهارم: آموزش کامل تگ template در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ template رو مثل یه حرفه‌ای یاد بگیری! اگه تا حالا پیش اومده بخوای یه بخش HTML رو آماده کنی ولی نخوای همون لحظه تو صفحه نشون داده بشه، تگ <template> دقیقا همون قهرمان پنهانته.
این تگ بهت اجازه میده کدی رو آماده تو HTML نگه داری و بعداً با JavaScript یا فریم‌ورک‌ها (مثل React یا Vue) بیاریش تو صفحه.
📌 مزیت اصلی: محتوای داخل <template> رو مرورگر تا وقتی خودت نخوای، رندر نمی‌کنه.

🏷️ تگ template چیه و چرا مهمه؟

تگ template یه عنصر معنایی تو HTML5ه که به توسعه‌دهنده‌ها اجازه می‌ده محتوای HTML رو بدون رندر شدن اولیه تو صفحه ذخیره کنن و بعداً با جاوااسکریپت به DOM اضافه کنن. این تگ مثل یه انبار مخفی برای الگوهای HTML عمل می‌کنه که می‌تونی هر وقت لازم شد، ازشون استفاده کنی. چرا مهمه؟ چون:

• بهبود عملکرد: محتوای داخل template تو بارگذاری اولیه پردازش نمی‌شه، پس سرعت صفحه بالا می‌ره (یه فاکتور کلیدی برای سئو).
• مدیریت داینامیک: جدا کردن قالب‌های HTML از کد اجرایی، خوانایی و نگهداری پروژه رو بهتر می‌کنه.
• امنیت بیشتر: اسکریپت‌های داخل template اجرا نمی‌شن، که از مشکلات امنیتی جلوگیری می‌کنه.
• سئوی غیرمستقیم: با بهبود سرعت و تجربه کاربری (UX)، نرخ پرش (Bounce Rate) کم می‌شه و رتبه‌بندی گوگل بهتر می‌شه.
• پشتیبانی گسترده: همه مرورگرهای مدرن (Chrome، Firefox، Safari، Edge) از تگ template پشتیبانی می‌کنن.

✏️ مثلاً، اگه بخوای یه لیست داینامیک از محصولات یا کارت‌های خبری بسازی، تگ template بهترین ابزارته!

🧱 ساختار تگ template: ساده، معنایی، و بهینه!

تگ template یه تگ جفتیه که محتوای HTML رو داخل خودش نگه می‌داره، اما تا وقتی با جاوااسکریپت فعالش نکنی، تو صفحه نمایش داده نمی‌شه. ساختار پایه‌ای‌ش اینه:

<template id="myTemplate">
    <div class="card">
        <h2>عنوان</h2>
        <p>این یک متن نمونه است.</p>
    </div>
</template>

✨ ویژگی‌های کلیدی تگ template:

• غیرقابل رندر: محتوای داخل template تو DOM وجود داره، ولی تا وقتی به‌صورت دستی اضافه نشه، نمایش داده نمی‌شه.
• اسکریپت غیرفعال: اسکریپت‌های داخل template اجرا نمی‌شن، که امنیت رو بالا می‌بره.
• شناسه (id): معمولاً با id مشخص می‌شه تا با جاوااسکریپت بهش دسترسی پیدا کنی.

📌 نکته سئو: چون محتوای template تو بارگذاری اولیه رندر نمی‌شه، باید مطمئن شی محتوای اصلی صفحه برای گوگل و کاربرا قابل دسترسیه.

💡 کاربردهای تگ <template>

• ساخت کامپوننت‌های تکراری بدون شلوغ شدن DOM
• بارگذاری داده‌های پویا
• کم کردن درخواست‌های HTTP با نگه داشتن UI آماده تو همون صفحه

🚀 چطور تگ template به سئو و عملکرد کمک می‌کنه؟

تگ template به‌صورت مستقیم روی ایندکس محتوا تاثیر نمی‌ذاره، چون موتورهای جستجو محتوای داخلش رو تا وقتی رندر نشه، نمی‌بینن. اما به‌صورت غیرمستقیم، با بهبود عملکرد و تجربه کاربری، سئو رو تقویت می‌کنه:

• افزایش سرعت صفحه: چون محتوای template تو بارگذاری اولیه پردازش نمی‌شه، زمان لود صفحه کم می‌شه (فاکتور مهم Core Web Vitals).
• کاهش نرخ پرش: سرعت بالا و تجربه کاربری بهتر باعث می‌شه کاربرا بیشتر تو سایت بمونن.
• مدیریت محتوای داینامیک: با جاوااسکریپت می‌تونی محتوای بهینه‌شده رو به‌صورت پویا رندر کنی .
• دسترسی‌پذیری: اگه محتوای رندرشده درست ساختاربندی بشه، صفحه‌خوان‌ها بهتر باهاش کار می‌کنن.

📌 هشدار سئو: محتوای داخل template تا رندر نشه، برای گوگل قابل ایندکس نیست. پس همیشه یه نسخه اولیه از محتوای مهم رو خارج از template داشته باش.

📝 مثال‌ عملی تگ template

بیا ببینیم که تگ template چطور کار می‌کنه:

<template id="newsTemplate">
    <article>
        <h2>عنوان خبر</h2>
        <time>20 آوریل 2025</time>
        <p>خلاصه خبر</p>
    </article>
</template>
<div id="newsFeed"></div>

📌 این کد به خودی خود نماش داده نمیشه با استفاه از جاوااسکریپت داینامیک و قابل نمایش میشه.

<script>
    const template = document.getElementById('newsTemplate').content;
    const newsFeed = document.getElementById('newsFeed');
    const news = [
        { title: 'اخبار بیت‌کوین', date: '2025-04-20', desc: 'تحلیل بازار ارز' },
        { title: 'فناوری جدید', date: '2025-04-21', desc: 'نوآوری در AI' }
    ];
    news.forEach(item => {
        const clone = document.importNode(template, true);
        clone.querySelector('h2').textContent = item.title;
        clone.querySelector('time').setAttribute('datetime', item.date);
        clone.querySelector('time').textContent = item.date;
        clone.querySelector('p').textContent = item.desc;
        newsFeed.appendChild(clone);
    });
</script>

❓ پرسش‌های متداول

۱. همه مرورگرها پشتیبانی می‌کنن؟
آره، تو همه مرورگرهای مدرن (از IE 11 به بعد با محدودیت) کار می‌کنه.

۲. محتوای <template> نشون داده میشه؟
نه، مگه اینکه خودت با جاوااسکریپت بیاریش تو DOM.

۳. برای سئو خوبه؟
مستقیم نه، باید رندرش کنی.

🏁 جمع‌بندی: محتوای داینامیکت رو با تگ template بترکون!

تگ template یه ابزار جادویی تو HTML5ه که بهت کمک می‌کنه محتوای داینامیک رو با عملکرد بالا، کد تمیز، و امنیت بهتر مدیریت کنی. با بهینه‌سازی سرعت صفحه، و توجه به دسترسی‌پذیری، می‌تونی سئوی سایتت رو حسابی تقویت کنی. فقط یادت باشه محتوای مهم رو خارج از template هم داشته باشی تا گوگل بتونه ایندکسش کنه. این مقاله کامل‌ترین راهنما برای تگ templateه: از ساختار و مثال‌ها تا ترفندهای سئو و عملکرد. حالا وقتشه دست به کد بشی و تگ template رو تو پروژه‌ات پیاده کنی!🚀در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

💬 ایده‌هات رو فریاد بزن!

نظرت درباره تگ template چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.