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

Nested Elements Structure هيكل العناصر المتداخلة وترتيبها

أتقن بنية عناصر HTML من الجذور: وسوم البداية والنهاية، العناصر الفارغة ذاتية الإغلاق، قواعد التداخل الهرمي، والفرق بين التدفق الكتلي والسطري.
4 صفوف تعليمية
لغة HTML
21,273 مشاهدة

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

الصف 1 شرح توضيحي

تُبنى صفحات الويب الحقيقية بوضع العناصر داخل بعضها في علاقة «أب وابن وحفيد» تُعرف باسم التداخل الهرمي (Nesting). وحتى يتمكن المتصفح من تشييد شجرة DOM سليمة بلا التباس، يجب الالتزام الصارم بقاعدة الأخير فتحاً هو الأول إغلاقاً (LIFO): أي أن العنصر الداخلي الأقرب للمحتوى يجب أن يُغلق بالكامل قبل إغلاق العنصر الأب المحيط به.

الصف 2 صورة توضيحية
مخطط التداخل الهرمي لعناصر HTML ومقارنة الإغلاق المتناظر السليم بالإغلاق المتقاطع الخاطئ
الصف 3 كود برمجي
HTML
<body>
  <h1>Security Bulletin</h1>
  <h2>Daily Check</h2>
  <p>Verify nested tags<br>before saving the file.</p>
</body>
الصف 4 ملاحظة هامة