آموزش و يادگيري تگ summary در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <summary> آشنا مي‌شويم. اين تگ براي تعريف عنوان قابل کليک درون تگ <details> استفاده مي‌شود و به کاربران اجازه مي‌دهد محتواي مخفي را باز يا بسته کنند.

تگ summary در HTML چيست؟

تگ <summary> معمولاً به عنوان اولين فرزند تگ <details> قرار مي‌گيرد و محتواي داخل آن هميشه قابل مشاهده است. وقتي کاربر روي آن کليک مي‌کند، محتواي <details> باز يا بسته مي‌شود. اين روش براي FAQها، راهنمايي‌ها و نمايش محتواي اختياري کاربرد دارد.

مثال ساده از تگ summary

<details>
  <summary>سوال متداول: HTML چيست؟</summary>
  HTML يک زبان نشانه‌گذاري براي طراحي صفحات وب است.
</details>

در اين مثال، متن "سوال متداول: HTML چيست؟" هميشه ديده مي‌شود و با کليک روي آن، توضيح مربوطه نمايش داده مي‌شود.

ويژگي‌هاي مهم تگ summary

مثال ترکيبي با CSS

<style>
summary {
  cursor: pointer;
  font-weight: bold;
  color: #2196f3;
}
</style>

<details>
  <summary>سوال متداول: HTML چيست؟</summary>
  HTML يک زبان نشانه‌گذاري براي طراحي صفحات وب است.
</details>

با CSS مي‌توان ظاهر تگ <summary> را جذاب‌تر و تعاملي‌تر کرد، مثل تغيير رنگ و نشانگر موس.

نکات مهم درباره summary

• تگ <summary> بايد داخل <details> قرار گيرد.
• متن داخل <summary> هميشه قابل مشاهده است و محتواي ديگر <details> هنگام کليک باز يا بسته مي‌شود.
• مي‌توان با CSS ظاهر و حالت کليک تگ را تغيير داد.

براي يادگيري کامل ايجاد بخش‌هاي باز و بسته شونده و FAQ در صفحات وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.