تگ summary در HTML

با تگ summary در HTML آشنا می شوید.

نکات اصلی تگ summary

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

استفاده از تگ summary در HTML

از تگ های summary در HTML برای محاصره محتوای خلاصه برای عنصر <details> استفاده می شود:

<details> 
  <summary>Click to reveal fun facts!</summary> 
  <p>A banana is a berry, but a strawberry is not.</p>
  <p>The Amazon rainforest covers 40 percent of South America.</p> 
  <p>Elephants can’t jump.</p> 
</details>

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

نکته: وقتی یک جدول دارای ساختار پیچیده ، ستون ها یا ردیف های زیادی از داده ها است ، تگ های HTML summary می توانند با درج خلاصه آن مفید باشند.

سبک بندی پیش فرض summary

الگوی summary در HTML پیش فرض شامل نمایشگر: لیست-مورد است. با این کار می توانید نماد مثلث را به نماد دیگری تغییر دهید یا کاملاً از شر آن خلاص شوید:

summary {
    display: list-item;
}

هشدار: نمایش: لیست مورد در همه مرورگرها به همان اندازه کار نمی کند.

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

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.