تگ details در HTML یکی از عناصر کاربردی HTML5 است که به شما امکان می‌دهد بخشی از محتوا را به‌صورت باز و بسته‌شونده (Collapsible Content) نمایش دهید. این تگ بدون نیاز به JavaScript، یک رابط کاربری تعاملی در اختیار کاربران قرار می‌دهد و برای ساخت بخش‌هایی مانند سوالات متداول (FAQ)، راهنمای کاربران، توضیحات محصول و آکاردئون (Accordion) بسیار کاربردی است.
در کنار این عنصر، تگ <summary> نیز قرار می‌گیرد که عنوان یا خلاصه محتوای قابل نمایش را مشخص می‌کند. زمانی که کاربر روی این عنوان کلیک می‌کند، محتوای داخل <details> باز یا بسته می‌شود.
اگر در گذشته برای ایجاد یک آکاردئون ساده مجبور بودید از JavaScript یا کتابخانه‌هایی مانند Bootstrap استفاده کنید، اکنون HTML5 راهکاری استاندارد، سبک و معنایی (Semantic) در اختیار شما قرار داده است.
در این مقاله با موضوعات زیر آشنا خواهید شد:
- تگ details در HTML چیست؟
- عنصر summary چه نقشی دارد؟
- چگونه از تگ details استفاده کنیم؟
- ویژگی open چه کاربردی دارد؟
- چگونه بدون JavaScript یک آکاردئون بسازیم؟
- بهترین روش‌های استفاده از این تگ چیست؟
- نکات مهم مربوط به Accessibility و تجربه کاربری
اگر هنوز با ساختار کلی HTML آشنا نیستید، پیشنهاد می‌کنیم ابتدا مقاله HTML چیست و چه کاربردی دارد؟ را مطالعه کنید. همچنین برای آشنایی با سایر عناصر این زبان، مقاله تگ در HTML چیست؟ و تگ‌های HTML می‌توانند نقطه شروع مناسبی باشند.
تگ details در HTML چیست؟
تگ <details> یکی از عناصر معنایی (Semantic Elements) در HTML5 است که برای نمایش یا مخفی کردن بخشی از محتوا استفاده می‌شود. این عنصر به کاربر اجازه می‌دهد تنها در صورت نیاز، اطلاعات بیشتری را مشاهده کند و در نتیجه از شلوغ شدن رابط کاربری جلوگیری شود.
به بیان ساده، هر محتوایی که داخل تگ <details> قرار بگیرد، در حالت عادی مخفی است و تنها با کلیک روی عنوان آن نمایش داده می‌شود. این رفتار به‌صورت پیش‌فرض توسط مرورگر پیاده‌سازی شده و نیازی به استفاده از JavaScript ندارد.
به همین دلیل، تگ details یکی از بهترین گزینه‌ها برای ایجاد بخش‌های باز و بسته‌شونده در صفحات وب محسوب می‌شود.
عنصر details چه کاری انجام می‌دهد؟
وظیفه اصلی این عنصر، مدیریت نمایش اطلاعات اضافی است. کاربر ابتدا فقط یک عنوان کوتاه مشاهده می‌کند و در صورت تمایل، می‌تواند با کلیک روی آن، جزئیات بیشتری را مشاهده کند.
از مهم‌ترین کاربردهای این تگ می‌توان به موارد زیر اشاره کرد:
- ایجاد بخش سوالات متداول (FAQ)
- نمایش توضیحات تکمیلی محصولات
- راهنمای کاربران
- مستندات آموزشی
- ساخت آکاردئون بدون JavaScript
- نمایش تنظیمات پیشرفته
- مخفی کردن اطلاعاتی که همه کاربران به آن نیاز ندارند
این روش علاوه بر مرتب نگه داشتن صفحه، تجربه کاربری بهتری نیز ایجاد می‌کند؛ زیرا کاربران تنها اطلاعات موردنیاز خود را مشاهده خواهند کرد.
چرا HTML تگ details را معرفی کرد؟
قبل از معرفی HTML5، توسعه‌دهندگان برای ایجاد محتوای باز و بسته‌شونده معمولاً از JavaScript استفاده می‌کردند. این کار اگرچه امکان‌پذیر بود، اما باعث افزایش حجم کد، پیچیدگی نگهداری و وابستگی بیشتر صفحات به اسکریپت‌ها می‌شد.
با معرفی تگ <details>، بسیاری از این سناریوها تنها با چند خط HTML قابل پیاده‌سازی شدند. علاوه بر این، مرورگرها رفتار استاندارد این عنصر را مدیریت می‌کنند و ابزارهای کمکی مانند صفحه‌خوان‌ها (Screen Readers) نیز درک بهتری از ساختار آن دارند.
به همین دلیل، استفاده از <details> علاوه بر سادگی توسعه، به بهبود Semantic HTML، دسترس‌پذیری (Accessibility) و تجربه کاربری نیز کمک می‌کند.
تگ details در یک نگاه
| ویژگی | توضیح |
|---|---|
| نام عنصر | <details> |
| دسته‌بندی | Interactive Element |
| نسخه HTML | HTML5 |
| نوع عنصر | Semantic Element |
| تگ مرتبط | <summary> |
| مهم‌ترین ویژگی | open |
| کاربرد اصلی | ایجاد محتوای باز و بسته‌شونده |
| نیاز به JavaScript | ❌ خیر |
| پشتیبانی مرورگرها | تقریباً تمام مرورگرهای مدرن |
| کاربردهای رایج | FAQ، راهنمای کاربر، توضیحات محصول، مستندات |
ساختار تگ details در HTML
برای استفاده از تگ <details> تنها به دو عنصر نیاز دارید:
- تگ <details> که محتوای قابل باز و بسته شدن را در خود نگه می‌دارد.
- تگ <summary> که عنوان یا بخش قابل کلیک را مشخص می‌کند.
ساختار کلی این عنصر به شکل زیر است:
<details>
<summary>عنوان</summary>
<p>محتوایی که بعد از کلیک نمایش داده می‌شود.</p>
</details>
در این ساختار، مرورگر به‌صورت خودکار یک فلش کوچک کنار عنوان نمایش می‌دهد. با کلیک روی عنوان، محتوا باز یا بسته می‌شود و نیازی به نوشتن حتی یک خط JavaScript نیست.
تگ summary در HTML چیست؟
تگ <summary> عنوان یا خلاصه‌ای است که کاربر در حالت عادی مشاهده می‌کند. این عنصر در واقع دکمه‌ای است که وضعیت باز یا بسته بودن <details> را کنترل می‌کند.
هر زمان کاربر روی محتوای داخل <summary> کلیک کند، مرورگر وضعیت عنصر <details> را تغییر می‌دهد.
به مثال زیر توجه کنید:
<details>
<summary>مشاهده توضیحات بیشتر</summary>
<p>این متن بعد از کلیک نمایش داده می‌شود.</p>
</details>
در این مثال، عبارت «مشاهده توضیحات بیشتر» همان بخشی است که کاربر روی آن کلیک می‌کند و پاراگراف داخل <details> فقط در حالت باز قابل مشاهده خواهد بود.
آیا می‌توان داخل summary عناصر HTML قرار داد؟
بله. یکی از مزیت‌های تگ <summary> این است که می‌توانید علاوه بر متن، از سایر عناصر HTML نیز استفاده کنید.
برای مثال:
<details>
<summary>
<strong>مشخصات محصول</strong>
</summary>
<p>این محصول دارای دو سال گارانتی است.</p>
</details>
حتی می‌توانید از آیکون‌ها، تصاویر کوچک یا عناصر Inline نیز استفاده کنید تا ظاهر بخش باز و بسته‌شونده حرفه‌ای‌تر شود.
اولین مثال از تگ details
حال بیایید یک مثال واقعی را بررسی کنیم.
<details>
<summary>HTML چیست؟</summary>
<p>
HTML زبان استاندارد ساخت صفحات وب است و ساختار اصلی هر وب‌سایت را مشخص می‌کند.
</p>
</details>
خروجی این کد
HTML چیست؟
HTML زبان استاندارد ساخت صفحات وب است و ساختار اصلی هر وب‌سایت را مشخص می‌کند.
توضیحات
کاربر در ابتدا فقط عبارت HTML چیست؟ را مشاهده می‌کند.
پس از کلیک روی آن، متن زیر نمایش داده می‌شود:
HTML زبان استاندارد ساخت صفحات وب است و ساختار اصلی هر وب‌سایت را مشخص می‌کند.
در صورت کلیک مجدد، محتوا دوباره مخفی خواهد شد.
این مثال چگونه کار می‌کند؟
بیایید کد بالا را خط‌به‌خط بررسی کنیم.
خط اول
<details>
شروع عنصر باز و بسته‌شونده است. تمام محتوایی که بین این تگ قرار بگیرد، توسط مرورگر مدیریت می‌شود.
خط دوم
<summary>HTML چیست؟</summary>
این بخش عنوان قابل کلیک را مشخص می‌کند.
خطوط بعدی
<p>
HTML زبان استاندارد ساخت صفحات وب است…
</p>
این محتوا در حالت عادی مخفی است و تنها پس از باز شدن <details> نمایش داده می‌شود.
خط آخر
</details>
پایان عنصر است.
چرا این روش بهتر از استفاده از JavaScript است؟
برای ایجاد یک بخش باز و بسته‌شونده، روش‌های مختلفی وجود دارد؛ اما در بسیاری از پروژه‌ها استفاده از <details> انتخاب مناسب‌تری است.
دلایل این موضوع عبارت‌اند از:
- کدنویسی بسیار ساده‌تر
- عدم نیاز به JavaScript
- عملکرد سریع‌تر
- خوانایی بیشتر کد
- ساختار معنایی (Semantic) مناسب
- دسترس‌پذیری بهتر برای کاربران و ابزارهای کمکی
- نگهداری آسان‌تر پروژه
البته این به معنی حذف کامل JavaScript نیست. اگر قصد دارید آکاردئون‌های پیچیده، انیمیشن‌های سفارشی یا تعاملات پیشرفته ایجاد کنید، همچنان JavaScript بهترین انتخاب خواهد بود. اما برای بسیاری از سناریوهای روزمره، تگ <details> تمام نیازهای شما را برطرف می‌کند.
<details open>
یا
<details open=”open”>
نحوه استفاده از تگ details در HTML
استفاده از تگ <details> بسیار ساده است و تنها در چند مرحله انجام می‌شود.
مرحله اول: ایجاد عنصر details
ابتدا تگ <details> را ایجاد کنید.
<details>
</details>
مرحله دوم: اضافه کردن تگ summary
در اولین خط داخل <details>، عنصر <summary> را قرار دهید.
<details>
<summary>سوال متداول</summary>
</details>
مرحله سوم: افزودن محتوای اصلی
در ادامه، محتوایی را که باید نمایش داده شود داخل عنصر قرار دهید.
<details>
<summary>سوال متداول</summary>
<p>
پاسخ این سوال در این قسمت قرار می‌گیرد.
</p>
</details>
اکنون یک بخش باز و بسته‌شونده کاملاً استاندارد خواهید داشت.
ساخت آکاردئون بدون JavaScript
یکی از مهم‌ترین کاربردهای تگ <details>، ساخت آکاردئون (Accordion) بدون استفاده از JavaScript است.
برای مثال، فرض کنید قصد دارید بخشی برای سوالات متداول کاربران طراحی کنید.
<details>
<summary>آیا این دوره مناسب افراد مبتدی است؟</summary>
<p>
بله. آموزش‌ها از سطح مقدماتی آغاز می‌شوند و به‌صورت مرحله‌به‌مرحله پیش می‌روند.
</p>
</details>
<details>
<summary>آیا پس از پایان دوره پروژه عملی انجام می‌دهیم؟</summary>
<p>
بله. در طول دوره چندین پروژه واقعی اجرا خواهید کرد.
</p>
</details>
<details>
<summary>آیا دوره به‌روزرسانی می‌شود؟</summary>
<p>
بله. تمامی دانشجویان به به‌روزرسانی‌های دوره دسترسی خواهند داشت.
</p>
</details>
در این مثال، هر سوال به‌صورت مستقل باز و بسته می‌شود و بدون استفاده از هیچ کتابخانه یا کد JavaScript، یک FAQ کاملاً استاندارد ایجاد خواهد شد.
کاربردهای تگ details
اگرچه بسیاری از توسعه‌دهندگان این عنصر را فقط برای ساخت FAQ می‌شناسند، اما کاربردهای آن بسیار گسترده‌تر است.
۱. بخش سوالات متداول (FAQ)
یکی از بهترین گزینه‌ها برای نمایش سوالات پرتکرار کاربران، استفاده از <details> است.
مزیت این روش، مرتب نگه داشتن صفحه و جلوگیری از نمایش حجم زیادی از متن است.
۲. توضیحات محصولات
در فروشگاه‌های اینترنتی می‌توان مشخصات فنی، شرایط گارانتی، نحوه ارسال یا راهنمای استفاده از محصول را داخل <details> قرار داد تا تنها در صورت نیاز نمایش داده شوند.
۳. راهنمای کاربران
در صفحات آموزشی معمولاً لازم نیست همه توضیحات به‌صورت هم‌زمان نمایش داده شوند.
می‌توان بخش‌های تکمیلی را داخل <details> قرار داد تا مطالعه مقاله برای کاربران ساده‌تر شود.
۴. مستندات فنی
در مستندات برنامه‌نویسی، توضیحات پیشرفته، مثال‌های اضافی یا نکات تکمیلی می‌توانند داخل این عنصر قرار گیرند.
۵. نمایش تنظیمات پیشرفته
در بسیاری از فرم‌ها، تنظیمات حرفه‌ای برای همه کاربران ضروری نیستند.
در این شرایط استفاده از <details> باعث می‌شود رابط کاربری ساده‌تر و خلوت‌تر باقی بماند.
چه زمانی بهتر است از تگ details استفاده نکنیم؟
اگرچه این عنصر بسیار کاربردی است، اما برای هر سناریویی مناسب نیست.
بهتر است در موارد زیر از روش‌های دیگر استفاده کنید:
- زمانی که به انیمیشن‌های پیچیده نیاز دارید.
- زمانی که فقط یک بخش باید باز باشد و سایر بخش‌ها به‌صورت خودکار بسته شوند.
- زمانی که وضعیت باز و بسته شدن باید در JavaScript مدیریت شود.
- زمانی که تعاملات پیشرفته بین چندین بخش وجود دارد.
در چنین شرایطی استفاده از JavaScript یا فریم‌ورک‌های رابط کاربری انتخاب مناسب‌تری خواهد بود.
نکته حرفه‌ای
از سال‌های اخیر، مرورگرهای مدرن از ویژگی name برای گروه‌بندی عناصر <details> نیز پشتیبانی می‌کنند. اگر چند عنصر <details> مقدار یکسانی برای ویژگی name داشته باشند، باز شدن یکی از آن‌ها باعث بسته شدن سایر اعضای همان گروه می‌شود؛ رفتاری مشابه آکاردئون‌های کلاسیک.
<details name="faq">
<summary>سوال اول</summary>
<p>پاسخ سوال اول</p>
</details>
<details name="faq">
<summary>سوال دوم</summary>
<p>پاسخ سوال دوم</p>
</details>
<details name="faq">
<summary>سوال سوم</summary>
<p>پاسخ سوال سوم</p>
</details>
البته از آنجا که این قابلیت نسبتاً جدید است، اگر پروژه شما باید از مرورگرهای قدیمی نیز پشتیبانی کند، بهتر است وضعیت پشتیبانی مرورگرهای هدف را قبل از استفاده بررسی کنید.
تفاوت تگ details و summary در HTML
بسیاری از افراد تازه‌کار تصور می‌کنند که تگ‌های <details> و <summary> عملکرد یکسانی دارند؛ در حالی که هر کدام نقش متفاوتی در ساخت این عنصر تعاملی ایفا می‌کنند.
به‌طور خلاصه، <details> نقش نگهدارنده (Container) را دارد، در حالی که <summary> عنوان یا بخش قابل کلیک را مشخص می‌کند.
| ویژگی | <details> | <summary> |
|---|---|---|
| وظیفه | نگهداری محتوای باز و بسته‌شونده | نمایش عنوان قابل کلیک |
| نمایش اولیه | محتوای اصلی را در خود نگه می‌دارد | همیشه قابل مشاهده است |
| قابلیت کلیک | خیر | بله |
| وجود مستقل | بله | فقط داخل <details> |
| وظیفه اصلی | مدیریت وضعیت باز و بسته شدن محتوا | فعال کردن باز و بسته شدن محتوا |
به بیان ساده، اگر <details> را مانند یک پوشه در نظر بگیریم، <summary> برچسب روی آن پوشه است که کاربر برای مشاهده محتویات روی آن کلیک می‌کند.
استایل‌دهی به تگ details با CSS
اگرچه ظاهر پیش‌فرض مرورگرها برای تگ <details> مناسب است، اما معمولاً در پروژه‌های واقعی لازم است ظاهر آن را با طراحی سایت هماهنگ کنید.
تغییر ظاهر کادر
details{
border:1px solid #dcdcdc;
border-radius:8px;
padding:12px;
margin:15px 0;
background:#fafafa;
}
این استایل یک کادر ساده و خوانا برای عنصر ایجاد می‌کند.
استایل‌دهی به summary
summary{
cursor:pointer;
font-weight:bold;
font-size:18px;
}
قرار دادن مقدار cursor: pointer باعث می‌شود کاربر متوجه شود که این بخش قابل کلیک است.
تغییر رنگ هنگام باز شدن عنصر
یکی از قابلیت‌های جذاب این تگ، وجود Selector مخصوص حالت باز است.
details[open]{
background:#eef8ff;
border-color:#4da3ff;
}
به این ترتیب، زمانی که کاربر عنصر را باز می‌کند، ظاهر آن نیز تغییر خواهد کرد.
حذف فلش پیش‌فرض مرورگر
در برخی طراحی‌ها ممکن است بخواهید فلش پیش‌فرض مرورگر را حذف کرده و آیکون دلخواه خود را جایگزین کنید.
در مرورگرهای مبتنی بر Chromium می‌توانید از کد زیر استفاده کنید:
summary::-webkit-details-marker{
display:none;
}
سپس با استفاده از ::before یا ::after یک آیکون سفارشی نمایش دهید.
نکات مهم هنگام استفاده از تگ details
رعایت چند نکته ساده باعث می‌شود استفاده از این عنصر حرفه‌ای‌تر و تجربه کاربری بهتری ایجاد کند.
همیشه از summary استفاده کنید.
اگر تگ <summary> را حذف کنید، مرورگر عنوان پیش‌فرضی نمایش می‌دهد که برای کاربران مناسب نیست.
عنوان را کوتاه و واضح بنویسید.
کاربر باید تنها با مشاهده عنوان، متوجه شود که با باز کردن آن چه اطلاعاتی دریافت خواهد کرد.
نمونه مناسب:
- مشخصات محصول
- سوالات متداول
- اطلاعات بیشتر
- راهنمای نصب
نمونه نامناسب:
- اینجا کلیک کنید
- بیشتر
- ادامه مطلب
از قرار دادن اطلاعات بسیار مهم داخل details خودداری کنید.
اگر اطلاعات برای همه کاربران ضروری است، بهتر است آن را به‌صورت مستقیم نمایش دهید.
تگ <details> بیشتر برای اطلاعات تکمیلی طراحی شده است.
از باز و بسته شدن‌های بیش از حد پرهیز کنید.
اگر تمام بخش‌های یک صفحه داخل <details> قرار بگیرند، کاربر برای مشاهده هر قسمت مجبور به کلیک خواهد شد که این موضوع می‌تواند تجربه کاربری را ضعیف کند.
همیشه تعادل را حفظ کنید.
اشتباهات رایج هنگام استفاده از تگ details
در ادامه چند اشتباه متداول را بررسی می‌کنیم که بهتر است از آن‌ها اجتناب کنید.
استفاده از details برای منوهای اصلی سایت
این عنصر برای ساخت منوی ناوبری طراحی نشده است.
برای منوها بهتر است از عناصر معنایی مانند <nav> و در صورت نیاز JavaScript استفاده کنید.
قرار دادن محتوای بسیار طولانی
اگر محتوای داخل <details> چندین صفحه طول داشته باشد، باز و بسته کردن آن تجربه مناسبی ایجاد نمی‌کند.
در چنین شرایطی بهتر است اطلاعات را در چند بخش مجزا تقسیم کنید.
حذف کامل استایل Focus
بعضی توسعه‌دهندگان هنگام سفارشی‌سازی ظاهر <summary>، استایل فوکوس صفحه‌کلید را حذف می‌کنند.
این کار باعث کاهش دسترس‌پذیری (Accessibility) می‌شود و استفاده از صفحه‌کلید را برای برخی کاربران دشوار می‌کند.
استفاده بی‌دلیل از JavaScript
گاهی مشاهده می‌شود که توسعه‌دهندگان برای پیاده‌سازی عملکردی که <details> به‌صورت پیش‌فرض ارائه می‌دهد، ده‌ها خط JavaScript می‌نویسند.
در چنین شرایطی استفاده از عنصر بومی HTML، کد را ساده‌تر، خواناتر و قابل نگهداری‌تر می‌کند.
پروژه عملی: ساخت یک بخش سوالات متداول (FAQ) با تگ details
اکنون که با تگ <details>، عنصر <summary> و نحوه استایل‌دهی آن‌ها آشنا شدید، وقت آن رسیده است که یک نمونه واقعی طراحی کنیم.
یکی از رایج‌ترین کاربردهای این تگ، ساخت بخش سوالات متداول (FAQ) است. بسیاری از وب‌سایت‌های فروشگاهی، آموزشی و شرکتی از این بخش برای پاسخ به پرسش‌های پرتکرار کاربران استفاده می‌کنند.
مزیت استفاده از <details> این است که بدون نیاز به JavaScript، یک FAQ کاملاً استاندارد، سبک و قابل دسترس ایجاد می‌کنید.
کد HTML
<section class="faq">
<details>
<summary>تگ details در HTML چه کاربردی دارد؟</summary>
<p>
این تگ برای ایجاد بخش‌های باز و بسته‌شونده مانند سوالات متداول، راهنمای کاربران و توضیحات محصولات استفاده می‌شود.
</p>
</details>
<details>
<summary>آیا برای استفاده از details به JavaScript نیاز داریم؟</summary>
<p>
خیر. تمام عملکرد باز و بسته شدن محتوا توسط مرورگر مدیریت می‌شود و نیازی به JavaScript نیست.
</p>
</details>
<details>
<summary>آیا می‌توان ظاهر این عنصر را تغییر داد؟</summary>
<p>
بله. با استفاده از CSS می‌توانید رنگ، فونت، فاصله‌ها، آیکون‌ها و ظاهر کلی این عنصر را سفارشی‌سازی کنید.
</p>
</details>
</section>
کد CSS
.faq{
max-width:700px;
margin:40px auto;
}
.faq details{
border:1px solid #d9d9d9;
border-radius:8px;
margin-bottom:15px;
background:#ffffff;
overflow:hidden;
}
.faq summary{
padding:15px;
cursor:pointer;
font-weight:bold;
list-style:none;
}
.faq summary::-webkit-details-marker{
display:none;
}
.faq summary::after{
content:"+";
float:left;
font-size:22px;
transition:.3s;
}
.faq details[open] summary::after{
content:"−";
}
.faq details p{
padding:0 15px 15px;
line-height:1.9;
}
.faq details[open]{
border-color:#0d6efd;
background:#f8fbff;
}
نتیجه این پروژه
با اجرای کدهای بالا، یک بخش FAQ خواهید داشت که ویژگی‌های زیر را دارد:
- بدون JavaScript کار می‌کند.
- ساختار معنایی (Semantic) مناسبی دارد.
- ظاهر آن با CSS شخصی‌سازی شده است.
- هنگام باز شدن هر بخش، رنگ کادر تغییر می‌کند.
- علامت + به − تبدیل می‌شود.
- خوانایی و تجربه کاربری مناسبی ارائه می‌دهد.
چه زمانی از details برای ساخت FAQ استفاده کنیم؟
استفاده از تگ <details> زمانی بهترین انتخاب است که:
- تعداد سوالات متداول کم یا متوسط باشد.
- پاسخ‌ها متن ساده یا محتوای سبک باشند.
- به انیمیشن‌های پیچیده نیاز نداشته باشید.
- بخواهید بدون وابستگی به JavaScript یک راهکار استاندارد و سریع پیاده‌سازی کنید.
اگر قصد دارید یک FAQ با تعاملات پیشرفته، جستجو، فیلتر یا انیمیشن‌های سفارشی ایجاد کنید، بهتر است در کنار HTML از CSS و JavaScript نیز استفاده کنید.
پشتیبانی تگ details در مرورگرها
یکی از نگرانی‌های رایج توسعه‌دهندگان، سازگاری عناصر جدید HTML با مرورگرهای مختلف است. خوشبختانه تگ <details> سال‌هاست که به بخشی از استاندارد HTML5 تبدیل شده و تقریباً تمام مرورگرهای مدرن از آن پشتیبانی می‌کنند.
جدول زیر وضعیت کلی پشتیبانی این عنصر را نشان می‌دهد.
| مرورگر | وضعیت پشتیبانی |
|---|---|
| Google Chrome | ✅ پشتیبانی کامل |
| Microsoft Edge | ✅ پشتیبانی کامل |
| Mozilla Firefox | ✅ پشتیبانی کامل |
| Safari | ✅ پشتیبانی کامل |
| Opera | ✅ پشتیبانی کامل |
| Chrome Android | ✅ پشتیبانی کامل |
| Safari iOS | ✅ پشتیبانی کامل |
بنابراین اگر کاربران شما از نسخه‌های نسبتاً جدید مرورگرها استفاده می‌کنند، می‌توانید با خیال راحت از تگ <details> در پروژه‌های خود استفاده کنید.
البته اگر پروژه شما باید از مرورگرهای بسیار قدیمی پشتیبانی کند، بهتر است قبل از استفاده، وضعیت سازگاری مرورگرهای هدف را بررسی کنید.
دسترس‌پذیری (Accessibility) در تگ details
یکی از دلایل محبوبیت تگ <details> این است که برخلاف بسیاری از آکاردئون‌هایی که با JavaScript ساخته می‌شوند، از همان ابتدا با در نظر گرفتن دسترس‌پذیری (Accessibility) طراحی شده است.
مرورگرها و صفحه‌خوان‌ها (Screen Readers) این عنصر را به‌عنوان یک بخش باز و بسته‌شونده تشخیص می‌دهند و وضعیت باز یا بسته بودن آن را به کاربران اعلام می‌کنند.
به همین دلیل، در بسیاری از پروژه‌ها استفاده از <details> نسبت به پیاده‌سازی سفارشی، انتخاب مناسب‌تری است.
با این حال، رعایت چند نکته باعث می‌شود نتیجه نهایی حرفه‌ای‌تر باشد.
۱. همیشه از عنوانی واضح در summary استفاده کنید.
کاربر باید تنها با خواندن عنوان، متوجه شود که با باز کردن این بخش چه اطلاعاتی مشاهده خواهد کرد.
برای مثال:
- مشخصات محصول
- سوالات متداول
- راهنمای نصب
در مقابل، عنوان‌هایی مانند «بیشتر» یا «اینجا کلیک کنید» اطلاعات مفیدی به کاربر منتقل نمی‌کنند.
۲. استایل Focus را حذف نکنید.
زمانی که کاربر با صفحه‌کلید در صفحه جابه‌جا می‌شود، مرورگر عنصر فعال را با یک کادر مشخص می‌کند.
برخی توسعه‌دهندگان هنگام طراحی ظاهر سفارشی، این کادر را حذف می‌کنند.
این کار باعث می‌شود استفاده از صفحه برای کاربران دارای محدودیت‌های حرکتی دشوارتر شود.
اگر قصد تغییر ظاهر Focus را دارید، بهتر است آن را به شکلی مناسب بازطراحی کنید، نه اینکه کاملاً حذف کنید.
۳. از details به‌عنوان منوی سایت استفاده نکنید.
اگرچه از نظر ظاهری ممکن است شبیه یک منوی بازشو باشد، اما هدف اصلی این عنصر نمایش اطلاعات تکمیلی است.
برای طراحی منوهای ناوبری بهتر است از عناصر معنایی مانند <nav> و در صورت نیاز JavaScript استفاده کنید.
۴. مهم‌ترین اطلاعات صفحه را داخل details مخفی نکنید.
اگر تمام محتوای اصلی مقاله یا صفحه را داخل <details> قرار دهید، کاربران مجبور می‌شوند برای مطالعه هر بخش کلیک کنند.
این موضوع معمولاً تجربه کاربری مناسبی ایجاد نمی‌کند.
بهتر است از این عنصر برای اطلاعات تکمیلی، توضیحات اضافی و محتوایی استفاده کنید که مطالعه آن برای همه کاربران ضروری نیست.
بهترین روش‌های استفاده از تگ details (Best Practices)
اگر می‌خواهید صفحات HTML حرفه‌ای‌تر و خواناتری ایجاد کنید، رعایت توصیه‌های زیر می‌تواند بسیار مفید باشد.
- همیشه از <summary> به‌عنوان اولین فرزند <details> استفاده کنید.
- عنوان‌های کوتاه، توصیفی و قابل فهم بنویسید.
- برای ساخت FAQ، راهنمای کاربران و توضیحات محصولات از این عنصر استفاده کنید.
- ظاهر پیش‌فرض مرورگر را با CSS متناسب با طراحی سایت سفارشی‌سازی کنید.
- از ویژگی open فقط زمانی استفاده کنید که نمایش اولیه محتوا برای کاربر اهمیت داشته باشد.
- برای ایجاد آکاردئون‌های پیچیده یا تعاملات پیشرفته، در کنار HTML از JavaScript نیز استفاده کنید.
- قبل از استفاده از قابلیت‌های جدید مانند ویژگی name، سازگاری آن را با مرورگرهای هدف پروژه بررسی کنید.
اشتباهات رایج هنگام استفاده از تگ details
در پایان، بهتر است با چند اشتباه رایج نیز آشنا شوید تا در پروژه‌های واقعی از آن‌ها اجتناب کنید.
استفاده از متن‌های بسیار طولانی
قرار دادن حجم زیادی از محتوا داخل یک <details> باعث می‌شود کاربر پس از باز کردن آن با یک دیوار بزرگ از متن روبه‌رو شود.
در چنین شرایطی بهتر است محتوا را به چند بخش کوچک‌تر تقسیم کنید.
استفاده بیش از حد از details
اگر تمام بخش‌های یک صفحه به‌صورت باز و بسته‌شونده طراحی شوند، کاربر برای مشاهده هر قسمت باید چندین بار کلیک کند.
این موضوع معمولاً تجربه کاربری را کاهش می‌دهد.
فراموش کردن استایل موبایل
در بسیاری از پروژه‌ها ظاهر <details> فقط برای دسکتاپ طراحی می‌شود.
قبل از انتشار صفحه، حتماً نسخه موبایل را نیز بررسی کنید تا فاصله‌ها، اندازه فونت و ناحیه قابل کلیک برای کاربران لمسی مناسب باشد.
استفاده از JavaScript بدون نیاز
اگر تنها هدف شما نمایش یا مخفی کردن چند خط متن است، استفاده از کتابخانه‌ها یا اسکریپت‌های پیچیده ضرورتی ندارد.
در بسیاری از موارد، تگ <details> به‌تنهایی تمام نیازهای شما را برطرف می‌کند و کدی ساده‌تر، سبک‌تر و قابل نگهداری‌تر در اختیارتان قرار می‌دهد.
جمع‌بندی
تگ <details> یکی از کاربردی‌ترین عناصر HTML5 برای نمایش محتوای باز و بسته‌شونده است. این عنصر به شما کمک می‌کند بدون نیاز به JavaScript، بخش‌هایی مانند سوالات متداول، راهنمای کاربران، توضیحات محصولات و مستندات آموزشی را به‌سادگی پیاده‌سازی کنید.
در این مقاله یاد گرفتید که تگ <details> چیست، چگونه از آن استفاده کنید، نقش تگ <summary> چیست، ویژگی open چه کاربردی دارد و چگونه یک آکاردئون استاندارد و سبک ایجاد کنید. همچنین با نکات مهم مربوط به استایل‌دهی، دسترس‌پذیری (Accessibility)، پشتیبانی مرورگرها و بهترین روش‌های استفاده از این عنصر آشنا شدید.
اگر در پروژه‌های خود از این تگ در جای مناسب استفاده کنید، علاوه بر ساده‌تر شدن کدها، ساختار معنایی صفحات نیز بهبود پیدا می‌کند و تجربه کاربری بهتری برای بازدیدکنندگان سایت ایجاد خواهد شد.
اگر می‌خواهید HTML را به‌صورت اصولی، پروژه‌محور و مطابق با استانداردهای روز یاد بگیرید، پیشنهاد می‌کنیم در دوره تخصصی HTML بیت‌آموز شرکت کنید.
در این دوره، تمام مفاهیم HTML از پایه آموزش داده می‌شوند و با اجرای پروژه‌های واقعی، مهارت لازم برای طراحی صفحات وب استاندارد را به دست خواهید آورد.
سوالات متداول
تگ <details> یکی از عناصر HTML5 است که برای ایجاد محتوای باز و بسته‌شونده (Collapsible Content) استفاده می‌شود. این تگ به کاربران اجازه می‌دهد تنها در صورت نیاز، اطلاعات بیشتری را مشاهده کنند و بدون استفاده از JavaScript، بخش‌هایی مانند سوالات متداول، راهنمای کاربران و توضیحات محصولات را پیاده‌سازی کنید.
تگ <details> نقش نگهدارنده محتوای قابل نمایش را بر عهده دارد، در حالی که تگ <summary> عنوان قابل کلیک آن را مشخص می‌کند.
به عبارت دیگر، کاربر روی <summary> کلیک می‌کند تا محتوای داخل <details> باز یا بسته شود.
خیر. تمام عملکرد باز و بسته شدن محتوا توسط مرورگر انجام می‌شود و نیازی به نوشتن هیچ کد JavaScript نیست.
البته اگر به انیمیشن‌های پیشرفته، کنترل هم‌زمان چندین بخش یا تعاملات پیچیده نیاز داشته باشید، می‌توانید از JavaScript در کنار این تگ استفاده کنید.
ویژگی open باعث می‌شود محتوای داخل <details> از همان ابتدای بارگذاری صفحه نمایش داده شود.
در حالت عادی، این محتوا مخفی است و تنها پس از کلیک کاربر روی <summary> نمایش داده می‌شود.
بله. یکی از مهم‌ترین کاربردهای تگ <details>، ساخت آکاردئون (Accordion) بدون استفاده از JavaScript است.
همچنین در مرورگرهای مدرن می‌توانید با استفاده از ویژگی name، چندین عنصر <details> را گروه‌بندی کنید تا تنها یکی از آن‌ها در هر لحظه باز باشد.
بله. تگ <details> یکی از عناصر استاندارد HTML5 است و استفاده صحیح از آن تأثیر منفی بر سئو ندارد.
برعکس، اگر برای نمایش اطلاعات تکمیلی، سوالات متداول یا توضیحات محصولات به‌درستی استفاده شود، می‌تواند ساختار صفحه را منظم‌تر و تجربه کاربری را بهتر کند.
با این حال، بهتر است محتوای اصلی صفحه را داخل <details> مخفی نکنید؛ زیرا کاربران باید بدون نیاز به کلیک، به مهم‌ترین اطلاعات دسترسی داشته باشند.
بله. مرورگرهای مدرن مانند Google Chrome، Microsoft Edge، Mozilla Firefox، Safari و Opera از تگ <details> پشتیبانی می‌کنند.
اگر پروژه شما باید از مرورگرهای بسیار قدیمی نیز پشتیبانی کند، بهتر است قبل از استفاده، وضعیت سازگاری آن‌ها را بررسی کنید.
اگر به تعاملات پیچیده، انیمیشن‌های سفارشی یا مدیریت وضعیت چندین بخش با JavaScript نیاز دارید، استفاده از <details> به‌تنهایی کافی نخواهد بود.
همچنین بهتر است از این تگ برای منوهای اصلی سایت یا مخفی کردن مهم‌ترین محتوای صفحه استفاده نکنید.