9. العناصر على مستوى الكتلة (Block-Level) مقابل العناصر المضمنة (Inline)

يندرج كل عنصر HTML في إحدى فئتين رئيسيتين. فهم هذا التمييز أساسي لهيكلة تخطيطاتك.

9.1 عناصر مستوى الكتلة (Block-Level Elements)

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

أمثلة: <h1> - <h6>، <p>، <div>، <section>، <ul>، <form>.

html

أنا عنصر كتلة (Block element).

أنا أيضاً عنصر كتلة، أجبرت على سطر جديد.

تشغل العناصر المضمنة فقط القدر الضروري من العرض (حجم محتواها). تتدفق بشكل طبيعي ضمن محتوى عنصر مستوى الكتلة، وتظهر جنباً إلى جنب.

أمثلة: <a>، <span>، <strong>، <em>، <img>.

html

يحتوي هذا النص على عنصر مضمن وعنصر مضمن آخر.

الاختلاف الرئيسي: لا يمكنك وضع عنصر على مستوى الكتلة داخل عنصر مضمن آخر. (على سبيل المثال، لا يمكنك وضع <p> داخل <em>).