شرح Block و Inline في HTML بالعربي — الفرق بين div وspan

لاحظت حتى الآن أن بعض العناصر — مثل <p> و<h1> — تبدأ في سطر جديد تلقائياً، بينما عناصر أخرى — مثل <strong> و<a> — تظهر في نفس السطر مع النص. لماذا؟ هذا هو سؤال هذا الدرس. كل عنصر HTML ينتمي إلى إحدى فئتين: Block أو Inline.

عناصر الكتلة — Block Elements

عنصر الكتلة له خاصيتان رئيسيتان:

1. يبدأ دائماً في سطر جديد — العناصر قبله وبعده تذهب لأسطر مستقلة
2. يأخذ العرض الكامل المتاح — يمتد من أقصى اليسار إلى أقصى اليمين (أو من أقصى اليمين في اللغات من اليمين كالعربية)

<!-- كل واحد منهم سيظهر في سطر منفصل -->
<h1>هذا عنوان (Block)</h1>
<p>هذه فقرة (Block)</p>
<div>هذا div (Block)</div>

أشهر عناصر Block:

العناصر المضمنة — Inline Elements

العنصر المضمن له خاصيتان مختلفتان تماماً:

1. لا يبدأ سطراً جديداً — يبقى في نفس تدفق النص
2. يأخذ فقط العرض الذي يحتاجه محتواه — لا أكثر

<!-- strong وem وa كلها في نفس السطر مع النص -->
<p>
    تعلم <strong>HTML</strong> ثم <em>CSS</em> ثم
    <a href="javascript.php">JavaScript</a> - كل هذا في سطر واحد!
</p>

أشهر عناصر Inline:

الفرق بصرياً — مقارنة مباشرة

<!-- Block: كل عنصر يأخذ سطره الكامل -->
<div style="background: lightblue; margin: 5px;">أنا div (Block) — أملأ السطر كله</div>
<div style="background: lightgreen; margin: 5px;">أنا div ثانٍ — في سطر منفصل</div>

<!-- Inline: العناصر بجانب بعضها في نفس السطر -->
<span style="background: lightblue;">أنا span (Inline)</span>
<span style="background: lightgreen;">أنا span ثانٍ — بجانب الأول!</span>
<span style="background: lightyellow;">وأنا ثالث — في نفس السطر</span>

الحاويتان الأساسيتان — <div> و<span>

هاتان الحاويتان مميزتان: ليس لهما معنى دلالي خاص — مجرد حاويات لتجميع العناصر وتطبيق التنسيق عليها بـ CSS.

<div> — الحاوية الكتلية

اختصار لـ Division. يُستخدم لتجميع أقسام كبيرة من الصفحة — مثل شريط التنقل، المحتوى الرئيسي، التذييل.

<div id="header">
    <h1>شعار الموقع</h1>
    <nav>قائمة التنقل</nav>
</div>

<div id="main-content">
    <h2>أحدث المقالات</h2>
    <p>محتوى المقال الأول...</p>
</div>

<div id="footer">
    <p>جميع الحقوق محفوظة 2025</p>
</div>

<span> — الحاوية المضمنة

يُستخدم لتنسيق جزء صغير من النص أو تمييزه بدون كسر تدفق السطر.

<p>
    سعر الكورس:
    <span style="color: red; text-decoration: line-through;">200 دولار</span>
    الآن
    <span style="color: green; font-weight: bold;">مجاني!</span>
</p>

<p>
    تعلمت اليوم <span style="background: yellow;">Block وInline</span> في HTML.
</p>

القاعدة الذهبية — ما يُسمح وما لا يُسمح

<!-- ✅ صحيح: Inline داخل Block -->
<p>هذا نص فيه <strong>كلمة مهمة</strong> وسط الجملة.</p>
<div><a href="#">رابط داخل div</a></div>

<!-- ❌ خطأ: Block داخل Inline -->
<span><div>هذا غير صحيح!</div></span>
<a href="#"><p>فقرة داخل رابط — خطأ في HTML5!</p></a>

<!-- ✅ صحيح: Block داخل Block -->
<div>
    <h2>عنوان القسم</h2>
    <p>محتوى القسم</p>
</div>

كيف يغيّر CSS هذا السلوك؟

CSS يتيح لك تغيير سلوك أي عنصر بخاصية display:

<!-- جعل span يتصرف كـ Block -->
<span style="display: block;">الآن أبدأ سطراً جديداً!</span>

<!-- جعل div يتصرف كـ Inline -->
<div style="display: inline;">الآن أبقى في نفس السطر!</div>

<!-- inline-block: مزيج من الاثنين -->
<div style="display: inline-block; width: 100px;">مربع صغير</div>
<div style="display: inline-block; width: 100px;">مربع ثانٍ بجانبه</div>

الأسئلة الشائعة — FAQ

لماذا لا يتصرف <img> تماماً كـ Inline العادي؟

<img> هو في الواقع Inline-Block (مضمن مع كتلة). يبقى في نفس السطر مثل Inline، لكنه يقبل width وheight مثل Block. لهذا يمكنك تحديد أبعاده مباشرة.

ما الفرق بين <div> و<section> و<article>؟

كلها عناصر Block. لكن <div> ليس له معنى دلالي. <section> يعني قسماً ذا محتوى مترابط. <article> يعني محتوى مستقلاً قائماً بذاته (مقال، بطاقة). في HTML5 الحديث، يُفضَّل استخدام العناصر الدلالية بدلاً من <div> قدر الإمكان.

هل يؤثر Block/Inline على SEO؟

بشكل غير مباشر نعم. استخدام العناصر الدلالية الصحيحة (h1, p, article...) مقارنة بإغراق الصفحة بـ div مُبهمة يساعد جوجل على فهم هيكل محتواك.