9. العناصر على مستوى الكتلة (Block-Level) مقابل العناصر المضمنة (Inline)
يندرج كل عنصر HTML في إحدى فئتين رئيسيتين. فهم هذا التمييز أساسي لهيكلة تخطيطاتك.
9.1 عناصر مستوى الكتلة (Block-Level Elements)
تبدأ عناصر الكتلة دائماً في سطر جديد وتشغل العرض الكامل المتاح، مما يدفع المحتوى المجاور أسفلها. إنها تنشئ تقسيمات هيكلية كبيرة.
أمثلة: <h1> - <h6>، <p>، <div>، <section>، <ul>، <form>.
html
<!-- مثال: هاتان الفقرتان ستتراكمان عمودياً --> <p>أنا عنصر كتلة (Block element).</p> <p>أنا أيضاً عنصر كتلة، أجبرت على سطر جديد.</p>9.2 العناصر المضمنة (Inline Elements)
تشغل العناصر المضمنة فقط القدر الضروري من العرض (حجم محتواها). تتدفق بشكل طبيعي ضمن محتوى عنصر مستوى الكتلة، وتظهر جنباً إلى جنب.
أمثلة: <a>، <span>، <strong>، <em>، <img>.
html
<!-- مثال: هذه الـ spans ستتدفق أفقياً --> <p> يحتوي هذا النص على <span style="color: red;">عنصر مضمن</span> وعنصر <span style="color: blue;">مضمن آخر</span>. </p>الاختلاف الرئيسي: لا يمكنك وضع عنصر على مستوى الكتلة داخل عنصر مضمن آخر. (على سبيل المثال، لا يمكنك وضع <p> داخل <em>).