تگ summary در HTML

نوشته شده توسط متین برونسی

منتشر شده در 1 ژوئن 2021

و آخرین بروزرسانی در 18 جولای 2021

دسته بندی ها:

HTML, فرانت اند

تگ summary در HTML درون عنصر <details> قرار میگیرد و نام یا عنوان این عنصر را مشخص می کند.

مثال

<details>
<summary>فیزیک کوانتوم</summary>
<p>مکانیک کوانتومی (به انگلیسی: Quantum mechanics) شاخه‌ای بنیادی از فیزیک نظری است که با پدیده‌های فیزیکی در مقیاس میکروسکوپی سر و کار دارد. </p>
</details>

تعریف و کاربرد

تگ summary در HTML درون تگ <details> جهت مشخص کردن یک نام یا عنوان برای عنصر <details> مورد استفاده قرار میگیرد.

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

پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
`<summary>`	12.0	79.0	49.0	6.0	15.0

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر summary در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

summary {
  display: block;
}

مثال های بیشتر

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}

details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>

<h1>عناصر details و summary به همراه CSS</h1>

<details>
<summary>روی من کلیک کن !</summary>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</details>

</body>
</html>