الفرق بين div و span في HTML: دليل شامل

ouwayess1@gmail.com 16 مارس، 2025

0 11 2 دقائق

1. الفرق الأساسي: Block vs Inline

العنصر	النوع	السلوك الافتراضي
`<div>`	Block-Level	يأخذ العرض الكامل للسطر ويبدأ من سطر جديد.
`<span>`	Inline	يأخذ المساحة اللازمة فقط ويبقى ضمن نفس السطر.

مثال توضيحي:

<div style="background: lightblue;">هذا عنصر div. سيظهر في سطر جديد.</div>
<span style="background: lightgreen;">هذا عنصر span. يظهر ضمن السطر.</span>
<span>عنصر span آخر.</span>

Run HTML

النتيجة:

2. الاستخدامات الشائعة لكل عنصر

العنصر	الاستخدام الأمثل
`<div>`	– تجميع أقسام الصفحة (الهيدر، الفوتر). – إنشاء شبكات التخطيط (Grid أو Flexbox). – تطبيق أنماط CSS على مجموعة من العناصر.
`<span>`	– تنسيق جزء من النص داخل فقرة. – إضافة أيقونات أو عناصر تفاعلية داخل النص. – تطبيق أنماط CSS على كلمة أو جملة محددة.

3. أمثلة عملية

أ. مثال مع `<div>` (بناء هيكل الصفحة)

<div class="header">
  <h1>عنوان الموقع</h1>
  <nav>...</nav>
</div>

<div class="content">
  <div class="article">مقالة 1</div>
  <div class="article">مقالة 2</div>
</div>

<div class="footer">
  <p>حقوق النشر © 2024</p>
</div>

Run HTML

ب. مثال مع `<span>` (تنسيق النصوص)

<p>
  هذه جملة تحتوي على <span style="color: red;">كلمة حمراء</span> 
  و<span style="font-weight: bold;">كلمة غامقة</span>.
</p>

Run HTML

4. الفروق في التنسيق (CSS)

الخاصية	`<div>`	`<span>`
`width` و `height`	يمكن تحديدها.	لا تعمل إلا إذا تم تغيير `display` إلى `inline-block` أو `block`.
`margin` و `padding`	تعمل على جميع الجهات.	تعمل على الجانبين (اليمين واليسار) فقط في الغالب.
`background`	يغطي المساحة الكاملة.	يغطي المساحة المحدودة للنص.

مثال مع CSS:

<div style="width: 200px; height: 100px; background: lightblue;">div</div>
<span style="width: 200px; height: 100px; background: lightgreen;">span</span>

Run HTML

النتيجة:

الـ <div> سيظهر كصندوق بحجم 200×100 بكسل.
الـ <span> لن يتغير حجمه (لأنه inline).

5. متى تستخدم كل منهما؟

اختر `<div>` عندما:

تريد تجميع عناصر كتلة (Block) مثل الصور والنماذج.
تبني تخطيط الصفحة (Layout).
تحتاج إلى تطبيق تأثيرات CSS معقدة (مثل الظلال، الحدود).

اختر `<span>` عندما:

تريد تنسيق جزء صغير من النص.
تحتاج إلى إضافة عناصر تفاعلية داخل جملة (مثل أزرار أو أيقونات).
تريد تعديل نمط عنصر دون التأثير على تدفق الصفحة.

6. أخطاء شائعة يجب تجنبها

استخدام <div> بدلًا من العناصر الدلالية:
- مثال خاطئ:
  html
  Copy
```
<div>عنوان المقالة</div>
```
  Run HTML
- الصحيح:
  html
  Copy
```
<h2>عنوان المقالة</h2>
```
  Run HTML
استخدام <span> لبناء التخطيطات:
- مثال خاطئ:
  html
  Copy
```
<span style="display: block;">تخطيط الصفحة</span>
```
  Run HTML
- الصحيح:
  html
  Copy
```
<div>تخطيط الصفحة</div>
```
  Run HTML
الإفراط في استخدام <div> (“Divitis”):
- تجنب:
  html
  Copy
```
<div><div><div>محتوى</div></div></div>
```
  Run HTML
- الحل: استخدم العناصر الدلالية مثل <section> أو <article>.

7. جدول مقارنة تفصيلي

المعيار	`<div>`	`<span>`
النوع	Block-Level	Inline
الاستخدام الرئيسي	تجميع العناصر الكتلية	تنسيق النصوص
التأثير على التخطيط	يبدأ سطر جديد	يبقى في نفس السطر
الدلالة (Semantics)	غير دلالي	غير دلالي
التنسيق الافتراضي	`display: block`	`display: inline`
أمثلة على العناصر المشابهة	`<section>`, `<article>`	`<strong>`, `<em>`

8. الأسئلة الشائعة

س: هل يمكنني تحويل `<div>` إلى Inline أو `<span>` إلى Block؟

نعم، باستخدام CSS:

div.inline { display: inline; }
span.block { display: block; }

س: أي العناصر أفضل لتحسين SEO؟

كلاهما غير دلالي، لذا لا يؤثران مباشرةً على SEO. لكن يُفضل استخدام العناصر الدلالية (مثل <header>, <nav>) عند الإمكان.

9. أفضل الممارسات

استخدم <div> لبناء الهيكل العام للصفحة.
استخدم <span> للتعديلات الدقيقة على النصوص.
تجنب الإفراط في استخدام أي منهما.
اختر العناصر الدلالية (HTML5) عند الإمكان.

10. مثال شامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <style>
        .product-card {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px;
            width: 300px;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="product-card">
        <h2>حذاء رياضي</h2>
        <p>السعر: <span class="highlight">199 ريال</span></p>
        <p>وصف المنتج: <span>مريح وأنيق للغاية.</span></p>
    </div>
</body>
</html>