الفرق بين العناصر Block والعناصر Inline في HTML
في هذا الدرس سنتعرف على الفرق بين عناصر Block وعناصر Inline في لغة HTML، مع أمثلة عملية لتوضيح كيفية استخدام كل نوع منهما داخل المتصفح وكيفية تفاعل هذه العناصر مع المحتوى.
أولاً: العناصر من نوع Block
عناصر الـ Block هي عناصر تأخذ مساحة عرض كاملة داخل المتصفح، أي أنها تبدأ دائمًا من سطر جديد وتشغل كامل عرض الصفحة المتاح. المتصفح بشكل افتراضي يضيف بعض الهوامش (Margins) لهذه العناصر، سواء كانت علوية أو سفلية، وذلك بدون أي تنسيق إضافي.
من أشهر عناصر الـ Block:
-
<address> -
<article> -
<aside> -
<blockquote> -
<div> -
<footer> -
<header> -
<section> -
<table> -
<main> -
<h1>حتى<h6>(عناوين)
مثال عملي على عناصر Block:
عند كتابة العنصر <h1> داخل وسم
<body> في محرر الأكواد:
<h1>عنوان رئيسي</h1>
وعند عرض الصفحة في المتصفح، سنلاحظ أن العنصر يأخذ سطرًا كاملًا، حتى لو كانت الكلمة قصيرة. ويمكن التأكد من ذلك باستخدام أداة الفحص (Inspect Element)، حيث يظهر أن العنصر يمتد بعرض الشاشة بالكامل.
وإذا قمنا بإضافة المزيد من النص داخل نفس العنصر:
<h1>هذا عنوان يتكون من 30 كلمة...</h1>
سنلاحظ أن العنصر ما زال يحتل سطرًا كاملاً، ويتم توزيع النص بداخله فقط. وعند تكرار نفس العنصر في نفس السطر داخل محرر الأكواد، سيقوم المتصفح تلقائيًا بعرض كل عنصر في سطر منفصل، لأن عناصر Block لا تُعرض بجانب بعضها البعض.
ثانيًا: العناصر من نوع Inline
عناصر الـ Inline، على عكس عناصر الـ Block، لا تأخذ سطرًا كاملًا، وإنما تشغل فقط المساحة المطلوبة لعرض المحتوى الموجود داخلها. كما أنها لا تضيف هوامش بشكل تلقائي.
من أشهر عناصر الـ Inline:
-
<a>(للروابط) -
<span> -
<img> -
<i>(للنص المائل) -
<b>(للنص العريض) -
<select> -
<sub>و<sup>(لنصوص أعلى أو أسفل السطر)
مثال عملي على عناصر Inline:
عند استخدام العنصر <a> لربط كلمة بموقع
إلكتروني:
<a href="#">اضغط هنا</a>
سنلاحظ أن هذا العنصر لا يشغل سطرًا كاملًا، بل يظهر بجانب العناصر الأخرى في
نفس السطر (إن وُجدت). وإذا كررنا عنصر <a> أكثر
من مرة داخل نفس السطر، فستُعرض جميع الروابط بجانب بعضها البعض. أما إذا
كتبناها كل واحدة في سطر منفصل داخل الكود، فستظهر بنفس الطريقة (جنبًا إلى
جنب) في المتصفح، لأنها عناصر Inline بطبيعتها.
هل يمكن إدخال العناصر داخل بعضها البعض؟
1. إدخال عنصر Block داخل آخر Block:
نعم، يمكن وضع عنصر Block داخل آخر. مثال:
<div>
<h1>عنوان داخل Div</h1>
</div>
في هذا المثال، العنصر <div> يعمل كحاوية
للعناصر الأخرى، وهذا الاستخدام شائع ومنظم.
2. إدخال عنصر Inline داخل آخر Inline:
أيضًا ممكن ولا توجد مشكلة، مثل:
<a href="#"><i>رابط مائل</i></a>
العنصر <i> هنا داخل
<a> وكلاهما من نوع Inline، وتم عرض المحتوى بشكل
طبيعي.
3. إدخال عنصر Inline داخل عنصر Block:
هذا الأمر شائع ويعمل بدون أي مشاكل، مثل:
<h1><span>عنوان فرعي</span></h1>
يتم عرض العنصر بشكل صحيح داخل المتصفح.
4. إدخال عنصر Block داخل عنصر Inline:
هذا الاستخدام غير صحيح، وقد يؤدي إلى نتائج غير متوقعة. فالعناصر من نوع Block لا يُفضل أن تُوضع داخل عناصر Inline، لأن ذلك يُخالف منطق عرض المحتوى وقد يؤدي إلى مشاكل في التنسيق.
مثال غير مفضل:
<a href="#"><div>محتوى داخل رابط</div></a>
في بعض الحالات قد يعمل الكود، لكن من الأفضل تجنبه للحفاظ على تنظيم وهيكلية الكود بشكل صحيح.
ملاحظات مهمة عند كتابة الكود
-
تأكد دائمًا من وضع العناصر في أماكنها الصحيحة داخل الهيكل العام للصفحة.
-
راعِ طبيعة كل عنصر (Block أو Inline) عند تنسيق الصفحة.
-
استخدم أدوات الفحص في المتصفح لفهم كيفية عرض العناصر على الشاشة.
-
لا تدمج عناصر Block داخل عناصر Inline لتجنب الأخطاء.
خاتمة
في نهاية هذا الدرس، تعرفنا على الفرق بين عناصر الـ Block وعناصر الـ Inline في HTML، وفهمنا طريقة عرض كل منهما داخل المتصفح، بالإضافة إلى بعض الأمثلة العملية التي توضح طريقة الاستخدام الصحيحة.
نتمنى أن يكون الشرح مفيدًا وواضحًا، تابعونا في الدروس القادمة لاستكمال تعلم HTML بشكل احترافي، ولا تتردد في ترك أي استفسار في التعليقات.