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

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

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

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

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

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

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

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

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

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

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

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

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

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

*Copyright*

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

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

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

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

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

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

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

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

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

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

جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ summary در HTML عنوان تگ details – اختصاصی سایت آموزی