الصناديق: Block و Inline و div و class و id

عناصر Block مقابل Inline

كل عنصر HTML يُعرض إمّا كـ block أو inline:

• Block (كتلة): يبدأ سطرًا جديدًا ويأخذ كامل العرض المتاح. أمثلة: <div>, <p>, <h1>, <section>.
• Inline (مضمّن): يأخذ فقط عرض محتواه ولا يبدأ سطرًا جديدًا. أمثلة: <span>, <a>, <strong>, <img>.

<p>هذه فقرة block.</p>
<p>هذه فقرة أخرى block (في سطر جديد).</p>

<span>هذا</span> <span>نص مضمّن</span> في نفس السطر.

العنصر <div> — صندوق block للتجميع

<div> حاوية block بلا معنى دلالي، نستخدمها لتجميع عناصر وتنسيقها معًا:

<div class="card">
  <h3>عنوان</h3>
  <p>محتوى البطاقة</p>
</div>

العنصر <span> — صندوق inline للتجميع

<span> حاوية inline بلا معنى، لتنسيق جزء من نص:

<p>السعر: <span class="price">99</span> ريال</p>

🔑 استخدم <div> و<span> فقط حين لا يوجد عنصر دلالي مناسب (راجع درس HTML الدلالي).

قبل أن تكتب <div> اسأل: هل لهذا الجزء اسم؟ إن كان ترويسة فهو <header>، أو قائمة تنقّل فـ <nav>، أو المحتوى الرئيسي فـ <main>، أو مقال مستقل فـ <article>، أو تذييل فـ <footer>. هذه العناصر تُعرض مثل <div> تمامًا، لكن المتصفح وقارئ الشاشة ومحرّك البحث يفهمون معناها. <div> لما يتبقّى: صناديق التنسيق البحتة، مثل حاوية تجمع بطاقات لترتيبها بـ Flexbox أو Grid.

جرّب: غيّر div الخارجي إلى span وشاهد كيف يتغيّر عرضه:

السمة class — قابلة لإعادة الاستخدام

class تُعطى لعدة عناصر، وتُستخدم للتنسيق بـ CSS أو الاختيار بـ JavaScript:

<p class="note">ملاحظة 1</p>
<p class="note">ملاحظة 2</p>

.note { color: orange; }

يمكن للعنصر أن يحمل عدة فئات:

<div class="card featured large">...</div>

السمة id — مُعرّف فريد

id يجب أن يكون فريدًا في الصفحة كلها. يُستخدم للروابط الداخلية، والاختيار الدقيق:

<h2 id="contact">تواصل معنا</h2>
<a href="#contact">اذهب للتواصل</a>

class مقابل id — الفرق الجوهري

الأخطاء الشائعة

• ❌ تكرار نفس id في الصفحة — يكسر JavaScript والروابط. استخدم class.
• ❌ "Divitis": تغليف كل شيء بـ <div>. استخدم العناصر الدلالية حين تناسب؛ صفحة كلها div متداخلة تُضعف الوصولية وفهم محرّكات البحث لها.
• ❌ <div onclick="..."> بدل زر: لا يصله المستخدم بلوحة المفاتيح (Tab) ولا يُعلَن كزر لقارئ الشاشة. الصحيح <button>.

خلاصة

block يأخذ سطرًا كاملًا وinline لا. <div>/<span> حاويات بلا معنى، وclass للتكرار وid للتفرّد.