معرفی و کاربرد تگ summary در HTML عنوان تگ details

معرفی و کاربرد تگ summary در HTML عنوان تگ details

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <summary> در HTML می پردازیم.

تگ <summary> در اچ تی ام ال

تگ <summary> یک تگ جدید در HTML5 محسوب می شود. و در نسخه های قدیمی تر سند HTML وجود نداشته است.

تگ <summary> یک عنوان قابل مشاهده برای تگ <details> تعریف می کند. که این عنوان را می توان با استفاده از کلیک کردن کاربر باز یا بسته نمود.

تگ <details> نیز جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.

تگ <details> مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ details قرار داد.

کاربر می تواند با کلیک بر روی تگ <details> محتویات درونی آن را مخفی یا نمایان سازد. در حالت پیش فرض محتویات درونی تگ <details> مخفی هستند .

تگ <summary> خلاصه ای به شکل یک تیتر درون تگ <details> می سازد.

تگ <summary> را همواره باید به صورت اولین عنصر فرزند تگ <details> استفاده نمایید.

مثال در مورد تگ <summary> در html

<details><summary>*Copyright*</summary><p>this is a paragraph.</p><p>this is a paragraph.</p></details>

خروجی کد در مرورگر اینترنتی

*Copyright*

بررسی تگ <summary> در HTML 4.01 و HTML5

تگ <summary> یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشته است.

خصوصیات ویژه تگ <summary> در اچ تی ام ال

تگ <summary> هیچگونه خصوصیت ویژه ای در سند HTML ندارد.

ویژگی های عمومی تگ <summary> در HTML

تگ <summary> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <summary> در HTML5

تگ <summary> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ <summary> در اچ تی ام ال

در جدول زیر اولین نسخه ی مرورگرهای اینترنتی که به طور کامل از تگ <summary> در HTML پشتیبانی کردند را مشاهده می کنید:


تگ	فایرفاکس	اینترنت اکسپلورر	گوگل کروم	سافاری	اپرا
summary	پشتیبانی نمی شود	پشتیبانی نمی شود	12.0 به بالا	6.0 به بالا	15.0 به بالا