تگ summary در html

تگ summary یک عنصر با قابلیت جمع شدن (collapsible) است. این تگ به صورت پیشفرض یک بخش از اطلاعات مخفی شده(عنوان) را نمایش می‌دهد، زمانی که کاربر روی عنوان کلیک می‌کند، بخش مخفی شده نمایش داده می‌شود.

نحوه استفاده از تگ <summary>

↑

تگ <summary> درون تگ <details> به کار گرفته می‌شود، در واقع اطلاعات مخفی شده درون تگ <details> قرار میگیرند اما عنوان قابل نمایش درون تگ <summary> قرار می‌گیرد، نمونه کد زیر نشان می‌دهد چگونه از این تگ استفاده کنید:

<details>
  <summary>عنوان</summary>
  <p>متن دلخواه</p>
</details>

attribute یا ویژگی‌های قابل استفاده در تگ <summary>

↑

تگ summary می‌تواند دارای چندین ویژگی یا attribute باشد که استفاده از این ویژگی‌ها اختیاری است.

Global Attributes

↑

تگ <summary> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

↑

تگ <summary> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ summary

↑

اکثر مرورگرها تگ <summary> را با مقادیر پیش فرض زیر نمایش می دهند:

summary{
  display: list-item;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس

ثبت نامتعرفه آموزش خصوصی