جلسه چهل و یکم: آموزش کامل تگ details در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ details رو مثل یه حرفه‌ای یاد بگیری! این تگ یکی از تگ‌های خیلی باحال و کاربردی تو HTML5‌ـه که بهت اجازه می‌ده یه بخشی از محتوا رو به‌صورت پیش‌فرض مخفی کنی و فقط با کلیک کاربر اون رو نشون بدی. تو این مقاله، از صفر تا صد تگ details رو با مثال‌های باحال، نکات خفن، و ترفندهای سئو می‌خونی تا بتونی محتوای پویات رو بترکونی و رتبه اول گوگل رو فتح کنی. آماده‌ای؟ بزن بریم!

🏷️ تگ <details> چیه و چرا مهمه؟

تگ <details> یکی از اون تگ‌های خاص HTML5ـه که بهت کمک می‌کنه یه رابط کاربری تمیز، تعاملی، و بدون نیاز به جاوااسکریپت بسازی.

با استفاده ازش می‌تونی یه بخش از محتوا رو به شکل پیش‌فرض مخفی نگه‌داری و وقتی کاربر روش کلیک کرد، محتوا باز شه. تو دنیای امروز که UX حرف اول رو می‌زنه، این تگ طلاست!

📌 چرا مهمه؟

• تجربه کاربری (UX) رو بهبود می‌ده: کاربران می‌تونن فقط محتوای مورد نیازشون رو ببینن، نه کل صفحه رو. این برای صفحاتی با اطلاعات زیاد مثل FAQ، توضیحات محصول، یا داده‌های تکمیلی عالیه.
• سئو رو تقویت می‌کنه: ساختار معنایی و تعاملی به گوگل کمک می‌کنه که محتوای پویات رو بهتر درک کنه و ارزش صفحه‌ات رو بالاتر ببره.
• دسترسی‌پذیری رو افزایش می‌ده: صفحه‌خوان‌ها می‌تونن summary رو بخونن و به کاربران کم‌بینا یا نابینا کمک کنن تا محتوای اضافی رو پیدا کنن.
• بارگذاری سریع‌تر: با پنهان کردن محتوای غیرضروری، سرعت صفحه‌ات بالاتر می‌ره و تجربه بهتری برای کاربر ایجاد می‌کنه.

مثلاً، اگه یه صفحه FAQ داری، با details می‌تونی هر سوال و جواب رو به شکلی نمایش بدی که کاربر فقط با کلیک روی سوال، جواب رو ببینه.

🧱 ساختار تگ details: ساده اما قدرتمند!

تگ details یه تگ جفتیه و معمولاً با تگ summary برای عنوان و محتوای اضافی کار می‌کنه. ساختار ساده‌ش اینه:

<details>
  <summary>عنوان یا چکیده</summary>
  <p>محتوای مخفی‌شده که هنگام کلیک روی عنوان نمایش داده می‌شود.</p>
</details>

• details: کل بخش قابل گسترش رو در خودش جا می‌ده.
• summary: عنوان یا چکیده‌ای که کاربر روش کلیک می‌کنه تا محتوای داخل details رو ببینه یا پنهان کنه.محتوای داخل details: هر چی بخوای، از متن و تصویر تا فرم و ویدیو.

💡 اتریبیوت open در تگ details

می‌تونی با اتریبیوت open تگ رو به‌صورت پیش‌فرض باز کنی:

مثال:

<details open>
  <summary>عنوان</summary>
  <p>محتوا</p>
</details>

خفن نیست؟ این ساختار به تو آزادی عمل می‌ده تا محتوای پویات رو مدیریت کنی!

🏷️ تگ <summary> چیه و چرا همیشه با <details> میاد؟

تگ <summary> بخش قابل کلیک ماجراست!
یعنی اون چیزی که کاربر روش کلیک می‌کنه تا محتوا رو باز کنه. اگه <summary> رو ننویسی، تگ <details> باز می‌شه ولی هیچ چیز قابل کلیک نیست! این تگ قلب تپنده details هست. summary باید کوتاه، واضح، و جذاب باشه تا کاربر رو ترغیب به کلیک کنه.

💡 کاربردهای تگ details

تگ <details> برای این موارد غوغا می‌کنه:

• سوالات متداول (FAQ): برای نمایش سوال و جواب به شکلی که کاربر فقط با کلیک روی سوال، جواب رو ببینه.
• جزئیات محصول: برای نمایش مشخصات فنی، نظرات کاربران، یا اطلاعات اضافی محصولات.
• راهنماها و آموزش‌ها: برای پنهان کردن بخش‌های پیشرفته یا اختیاری.
• فرم‌ها و تنظیمات: برای نمایش گزینه‌های اضافی یا پیشرفته در فرم‌ها.
• محتوای تعاملی: برای ایجاد منوهای کشویی، هشدارها، یا اطلاعات پنهان.

📝 مثال واقعی و کاربردی

1. سوالات متداول (FAQ)

<details>
  <summary>آیا ارسال رایگانه؟</summary>
  <p>بله، برای سفارش‌های بالای ۵۰۰ هزار تومان.</p>
</details>

2. توضیحات محصول

<details>
  <summary>مشخصات فنی لپ‌تاپ</summary>
  <ul>
    <li>CPU: Core i7</li>
    <li>RAM: 16GB</li>
    <li>SSD: 512GB</li>
  </ul>
</details>

3. محتوای پیش‌فرض باز

<details open>
    <summary>نکات مهم</summary>
    <p>این نکات برای همه کاربران نمایش داده می‌شه. برای اطلاعات بیشتر، بخش‌های دیگه رو باز کن!</p>
</details>

این مثال‌ها نشون می‌دن چطور details می‌تونه محتوای پویات رو جذاب و کاربرپسند کنه!

❓ سوالات متداول درباره <details>

🔹 فرق <details> با JS-based accordion چیه؟

<details> بدون JS کار می‌کنه و با HTML خالص ساخته می‌شه. سبک‌تره، سریع‌تره، و از نظر سئو و دسترسی بهتره. ولی ظاهرش محدودتره و با CSS باید شخصی‌سازی شه.

🔹 می‌تونم چند تا <details> رو باهم باز کنم؟

آره. این تگ‌ها مستقل از هم هستن. اگه بخوای فقط یکی باز شه، باید با JS کنترلش کنی.

🔹 داخل <details> می‌تونم از فرم یا عکس هم استفاده کنم؟

بله، هر نوع محتوایی که تو HTML مجازه، می‌تونی تو <details> بذاری.

🎯 پروژه عملی

یه بخش سوالات متداول (FAQ) با تگ <details> بساز. حداقل ۳ سؤال با جواب داشته باشه که با کلیک باز و بسته بشن. سوالات می‌تونن درباره سایت، فروشگاه یا هر موضوعی باشن.

در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

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

حالا تگ details رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با details می‌تونی محتوای پویا و تعاملی صفحه‌ات رو تو وب جذاب، منظم، و سئو محور نشون بدی، تجربه کاربرات رو بهتر کنی، و گوگل رو عاشق سایتت کنی! این مقاله، کامل‌ترین راهنما برای تگ details هست: ساختار، کاربردها، مثال‌ها، نکات پیشرفته، و ترفندهای سئو. پس معطل نکن! یه details بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم!

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

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

شهرام نجفی

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