<div>

وسم الحاوية العامة <div>

وسم div حاوية كتلية عامة بلا معنى دلالي — تُستخدم لتجميع العناصر لأغراض التنسيق والتخطيط بـ CSS.

أكثر الوسوم استخدامًا وأكثرها إساءة استخدام أيضًا. div مجرد «صندوق» يبدأ سطرًا جديدًا ويحتوي عناصر أخرى، بلا أي معنى يفهمه المتصفح أو محرك البحث. قوته أنه اللبنة العامة لأي تخطيط: تجمع فيه العناصر ثم تنسقها بـ Flexbox أو Grid.

القاعدة الذهبية: استخدم div عندما لا يوجد وسم دلالي أنسب. للترويسة header، للتنقل nav، للمحتوى الرئيسي main، للمقال article — وdiv لما تبقى من صناديق التنسيق البحتة.

الصياغة

<div class="card">
  <!-- عناصر مجمّعة -->
</div>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<div style="background:#ede9fe; padding:16px; border-radius:12px">
  <h3 style="margin:0 0 8px">بطاقة داخل div</h3>
  <p style="margin:0">الحاوية تجمع العناصر لتنسيقها معًا.</p>
</div>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
class	الخطاف الأساسي لتنسيق الحاوية بـ CSS
id	معرّف فريد — للروابط الداخلية #id أو الجافاسكريبت

💡 نصائح عملية

قبل كتابة div اسأل: هل يوجد وسم دلالي أنسب؟ (header/nav/main/section/article/footer)
div عنصر كتلي (block) يملأ عرض أبيه ويبدأ سطرًا جديدًا — قارن بـ span السطري

⚠️ أخطاء شائعة

«حساء الـ div»: بناء الصفحة كلها من div متداخلة — يضعف SEO والوصولية
استخدام div كزر مع onclick — يفقد دعم لوحة المفاتيح؛ الصحيح <button>

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs