الفرق بين وسمي Span و Div في HTML: متى تستخدم كل واحد منهما؟

مقدمة: لماذا يختلط الأمر بين span وdiv؟

عند فحص أي صفحة ويب عبر أدوات المطور في المتصفح، ستلاحظ غالبًا وجود عدد كبير من عناصر div المتداخلة، وقد تجد أيضًا بعض الأجزاء النصية مغلفة بعنصر span. ويُستخدم العنصران عادةً لتنظيم المحتوى وتجميعه، لكن لكل واحد منهما وظيفة مختلفة من حيث البنية والسلوك داخل الصفحة.

في هذا الدليل التقني، ستتعرف بوضوح على الفرق بين span وdiv في HTML، وكيفية استخدام كل منهما في المكان المناسب، مع أمثلة عملية تساعدك على بناء صفحات أكثر تنظيمًا واحترافية.

الفرق الأساسي بين span وdiv في HTML

يمكن استخدام كل من span وdiv كعناصر حاوية Container Elements بهدف تمييز جزء محدد من الصفحة أو تطبيق تنسيق مختلف عليه باستخدام CSS أو التعامل معه بواسطة JavaScript. لكن الفارق الجوهري بينهما يكمن في طبيعة العرض:

• div هو عنصر Block-level، أي أنه يشغل سطرًا كاملًا بطبيعته.
• span هو عنصر Inline-level، أي أنه يبقى ضمن السطر نفسه دون كسر تدفق النص.

هذا الاختلاف البسيط ظاهريًا يؤثر بشكل كبير على طريقة تصميم الصفحات وتنظيم عناصرها.

ما هو العنصر div في HTML؟

العنصر div هو عنصر عام يُستخدم لتجميع أجزاء كبيرة من الصفحة داخل كتلة واحدة. وغالبًا ما يُستعمل لاحتواء أقسام مثل:

• رأس الصفحة header
• القائمة التنقلية
• المحتوى الرئيسي
• التذييل footer
• البطاقات والعناصر المركبة في الواجهات

ويُعد div مناسبًا جدًا عند بناء تخطيط الصفحة أو تقسيمها إلى أقسام واضحة يمكن تنسيقها بسهولة.

مثال عملي على استخدام div لتجميع رأس الصفحة

< div class = "header" > < h2 class = "logo" > freeCodeCamp </ h2 > < ul class = "nav" > < li > < a href = "" > Home </ a > </ li > < li > < a href = "" > About </ a > </ li > < li > < a href = "" > Serices </ a > </ li > < li > < a href = "" > Contact </ a > </ li > </ ul > </ div >

في المثال السابق، تم استخدام div ليكون حاوية رئيسية تضم الشعار وروابط التنقل داخل الهيدر.

تنسيق div باستخدام CSS

* { margin : 0 ; padding : 0 ; box-sizing : border-box; } .header { padding : 0 70px ; display : flex; align-content : center; justify-content : space-between; margin-top : 20px ; margin-bottom : 20px ; color : crimson; } .nav { display : flex; align-content : center; justify-content : center; gap : 60px ; list-style-type : none; } .nav li a { text-decoration : none; font-size : 1.2rem ; color : crimson; }

يوضح هذا التنسيق كيف يمكن الاعتماد على div عند إنشاء بنية مرنة للواجهة باستخدام CSS Flexbox، وهي من أكثر حالات الاستخدام شيوعًا لهذا العنصر.

متى يكون div الخيار المناسب؟

استخدم div عندما تحتاج إلى:

• تجميع أجزاء كبيرة من المحتوى داخل الصفحة.
• إنشاء أقسام مستقلة لتسهيل التصميم أو البرمجة.
• تنظيم التخطيط العام للصفحة.
• تغليف عناصر متعددة مثل النصوص والصور والفيديوهات داخل وحدة واحدة.

كما يمكن أيضًا تداخل عدة عناصر div داخل بعضها البعض عند الحاجة، بشرط الحفاظ على تنظيم واضح عبر class أو id مناسب.

ما هو العنصر span في HTML؟

العنصر span هو عنصر Inline يُستخدم عادةً لتحديد جزء صغير من النص أو المحتوى داخل سطر واحد، بهدف تطبيق تنسيق مختلف عليه أو استهدافه بواسطة JavaScript.

على عكس div، فإن span لا يُستخدم عادةً لتقسيم الصفحة أو بناء هيكلها، بل لتعديل جزء دقيق من المحتوى مثل:

• تمييز كلمة بلون مختلف.
• إبراز جزء من جملة بخط مائل أو عريض.
• استهداف كلمة أو عبارة محددة عبر JavaScript.

مثال عملي على استخدام span داخل النص

< p > This is a < span class = "crimson" > crimson text </ span > within black texts. This is an < span class = "indigo" > indigo text </ span > within others, and this is an < span class = "orange" > orange text </ span > within other texts. </ p >

تنسيق span باستخدام CSS

body { display : flex; align-items : center; justify-content : center; max-width : 900px ; margin : 0 auto; height : 100vh ; } p { font-size : 2.5rem ; } .font-style { font-style : italic; } .crimson { color : crimson; } .indigo { color : indigo; } .orange { color : orange; }

في هذا المثال، أُحيطت كلمات محددة بعناصر span حتى يمكن تغيير ألوانها دون التأثير في بقية النص. وهذا هو الاستخدام المثالي لهذا العنصر.

ملاحظات مهمة عند استخدام span

• يُستخدم لتعديل أجزاء صغيرة من المحتوى، وليس لبناء هيكل الصفحة.
• يمكن وضع عدة عناصر span داخل عنصر كتلي مثل p أو div.
• يفضل تجنب التداخل المفرط لعناصر span حتى لا يصبح الكود معقدًا أو صعب الصيانة.

جدول مقارنة بين span وdiv

متى تستخدم span ومتى تستخدم div؟

استخدم span عندما:

• تحتاج إلى تنسيق كلمة أو عبارة محددة داخل النص.
• تريد استهداف جزء صغير من المحتوى بواسطة JavaScript.
• تتعامل مع عناصر Inline ولا تريد كسر السطر.

استخدم div عندما:

• تريد تجميع مجموعة عناصر داخل حاوية واحدة.
• تعمل على بناء Layout أو تقسيم الصفحة إلى أقسام.
• تحتاج إلى تطبيق تنسيقات على كتلة كاملة من المحتوى.

ملاحظة مهمة حول HTML5 والعناصر الدلالية

رغم أن div وspan عنصران أساسيان في HTML، فإن HTML5 قدم عناصر دلالية Semantic Elements مثل:

• section
• header
• nav
• footer
• article
• main

لذلك، من الأفضل استخدام هذه العناصر الدلالية كلما كان معناها مناسبًا للمحتوى، واللجوء إلى div أو span عندما لا يكون هناك عنصر دلالي يؤدي الغرض نفسه.

أفضل الممارسات عند استخدام span وdiv

1. لا تستخدم div بدلًا من العناصر الدلالية دون سبب.
2. لا تفرط في استخدام span لتغليف كل كلمة أو جزء صغير بلا حاجة.
3. اختر أسماء class واضحة تعبر عن الوظيفة أو الغرض.
4. حافظ على بنية HTML نظيفة وسهلة القراءة.
5. فكّر دائمًا في قابلية الصيانة قبل إضافة عناصر حاوية جديدة.

الخلاصة التقنية

الفرق بين span وdiv ليس مجرد فرق شكلي، بل هو جزء أساسي من فهم بنية HTML بصورة صحيحة. إذا كنت تريد التحكم في جزء صغير داخل النص فاستخدم span، أما إذا كنت تبني قسمًا كاملًا أو تنظم مكونات الصفحة فاختر div. ومن الناحية التقنية، فإن الاستخدام الواعي لهذين العنصرين ينعكس مباشرة على جودة الكود، وسهولة صيانته، ووضوح هيكل الصفحة لمحركات البحث والمطورين على حد سواء.