HTML Tutorial

عنصر <summary>

استخدام عنصر <summary>:

يستخدم عنصر <summary> لإنشاء عنوان يمكن النقر عليه، عند النقر عليه، فإنه يعرض أو يخفي المحتوى المرتبط به. غالبًا ما يستخدم لإخفاء المحتوى غير الضروري أو المتكرر، مما يحسن قابلية استخدام الصفحة.

خصائص عنصر <summary>:

  • id: معرف فريد للعنصر.
  • class: اسم فئة لتنسيق العنصر.
  • title: نص بديل يصف الغرض من العنصر.
  • open: تحدد ما إذا كان المحتوى المرتبط مكشوفًا أم مخفيًا عند تحميل الصفحة.

أمثلة مع عنصر <summary>:

  • لإنشاء عنوان قابل للنقر عليه يعرض مقطعًا من النص عند النقر عليه:
<details>
  <summary>إظهار النص</summary>
  <p>هذا هو النص المخفي.</p>
</details>
  • لإنشاء عنوان قابل للنقر عليه يخفي قائمة من العناصر:
<details>
  <summary>إخفاء القائمة</summary>
  <ul>
    <li>العنصر 1</li>
    <li>العنصر 2</li>
    <li>العنصر 3</li>
  </ul>
</details>

مثال HTML لعرض عنصر <summary>:

<!DOCTYPE html>
<html>
<body>
  <h1>عناوين قابلة للنقر باستخدام <summary></h1>

  <details>
    <summary>إظهار النص</summary>
    <p>هذا هو النص المخفي.</p>
  </details>

  <details>
    <summary>إخفاء القائمة</summary>
    <ul>
      <li>العنصر 1</li>
      <li>العنصر 2</li>
      <li>العنصر 3</li>
    </ul>
  </details>
</body>
</html>

ملاحظة: يتطلب عنصر <summary> عنصرًا رئيسيًا <details> ليعمل بشكل صحيح.