شرح صفوف ومحتوى الفقرة
تضع مواصفة HTML5 معايير هيكلية صارمة تحكم قواعد التداخل السليم بين العناصر الكتلية والسطرية. وتتمثل القاعدة الكبرى في أن الحاويات الكتلية يمكنها احتضان عناصر كتلية أخرى وعناصر سطرية بكل حرية، بينما لا يجوز للعناصر السطرية أو وسوم الفقرات أن تحتوي في داخلها على عناصر كتلية أبداً.
HTML
<!-- Valid Clean Structure -->
<div>
<h3>Product Feature</h3>
<p>Explore our <span title="Core API">API</span> docs.</p>
</div>
<!-- INVALID ANTI-PATTERN: Never put div inside p -->
<!-- <p>Intro text <div>Broken Box</div> Closing</p> -->من أكثر الأخطاء الشائعة بين المطورين وضع عنصر كتلي مثل
<div> داخل وسم الفقرة <p>. وبحسب خوارزميات تحليل HTML القياسية، فإن المتصفح عند مواجهته لوسم كتلي داخل فقرة يغلق الفقرة قسرياً على الفور، مما يشطر البنية إلى ثلاث عقد مشوهة في شجرة DOM ويفسد محددات التنسيق واختبارات الجودة.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية الكاملة للعناصر الكتلية والسطرية في HTML: تدفق الكتل على كامل السطر مقابل انسياب السطور، واحترام نموذج الصندوق والأبعاد، وتجميع الهيكل بواسطة div، والتغليف النظيف للنصوص عبر span، وقواعد التداخل المعتمدة لمنع تشوه DOM. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف خاصيتي الفئات class والمعرفات id في تنظيم وتنسيق عناصر الصفحة.