انتقل إلى محتوى الدرس

Grouping Content with Div Element تجميع المحتوى باستخدام حاوية التقسيم

تعلم الفروق الهيكلية الجوهرية بين العناصر الكتلية والسطرية في لغة HTML وكيفية تدفقها في الصفحة وتجميع الحاويات بواسطة div وتنسيق المقاطع باستخدام span وقواعد التداخل القياسي.
4 صفوف تعليمية
لغة HTML
9,512 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يعد عنصر التقسيم <div>، وهو اختصار لكلمة division، حاوية كتلية عامة لا تحمل أي دلالة لغوية مسبقة. ويعمل كغلاف هيكلي محايد يجمع عدة عناصر مترابطة معاً، مما يتيح للمطورين تطبيق فئات التنسيق وإسناد المعرفات الفريدة وإدارة أجزاء متكاملة من شجرة DOM برمجياً عبر لغة جافا سكريبت.
الصف 2 كود برمجي
HTML
<div>
  <img src="images/examples/studio-emblem.webp"
       alt="Quantum Core Cube" width="120" height="120">
  <h3>Quantum Cloud Engine</h3>
  <p>High-throughput edge computing module.</p>
  <div>
    <a href="#specs">View Specs</a>
  </div>
</div>
الصف 3 شرح توضيحي
على الرغم من المرونة الفائقة التي يوفرها عنصر <div> وأهميته في تجميع الكتل المترابطة، إلا أنه يجب الحذر من الإفراط العشوائي في استخدامه لكي لا تتحول الصفحة إلى فوضى من الحاويات غير المفهومة. وحيثما توفرت وسوم متخصصة للمحتوى كالعناوين والفقرات والقوائم والجداول والنماذج، فإن استخدامها يظل هو الخيار القياسي الأفضل.
الصف 4 ملاحظة هامة