الفرق بين div و section و article في HTML مع أمثلة للمبتدئين
بعد تعلم الجداول في HTML، نصل الآن إلى موضوع مهم جدًا يتعلق بتنظيم هيكل الصفحة، وهو الفرق بين الوسوم div و section و article. هذه الوسوم تُستعمل بكثرة في تصميم المواقع الحديثة، لكن الكثير من المبتدئين يخلطون بينها. في هذا الدرس سنوضح وظيفة كل وسم ومتى يجب استخدامه بالطريقة الصحيحة.
ما هو وسم div في HTML؟
وسم div هو اختصار لكلمة Division، ويُستخدم لتجميع العناصر داخل الصفحة بدون أن يحمل أي معنى دلالي. بمعنى آخر، div لا يوضح نوع المحتوى الذي بداخله، وإنما يُستعمل فقط للتقسيم والتنظيم، خصوصًا عند استخدام CSS أو JavaScript.
متى نستخدم div؟
يُستخدم div عندما نحتاج إلى تجميع عناصر بغرض التنسيق أو التحكم في التصميم. مثل إنشاء صندوق يحتوي على صورة ونص، أو تقسيم الصفحة إلى أعمدة. غالبًا ما يكون div مرتبطًا بـ CSS لأغراض التصميم.
ما هو وسم section؟
وسم section هو وسم دلالي (Semantic Element)، ويُستخدم لتقسيم الصفحة إلى أقسام منطقية. كل section يمثل جزءًا مستقلًا من المحتوى ويحتوي غالبًا على عنوان يشرح محتواه. هذا الوسم يساعد محركات البحث على فهم بنية الصفحة بشكل أفضل.
متى نستخدم section؟
نستخدم section عندما يكون لدينا محتوى يمكن تقسيمه إلى أقسام واضحة، مثل أقسام الصفحة الرئيسية، أو أقسام داخل مقال. استعمال section يُحسن تنظيم الصفحة ويُعتبر أفضل من div في هذه الحالات.
ما هو وسم article؟
وسم article هو أيضًا وسم دلالي، ويُستخدم لتمثيل محتوى مستقل بذاته. يمكن أن يكون هذا المحتوى مقالًا، خبرًا، تدوينة، أو منشورًا. الفكرة الأساسية أن article يمكن فهمه بشكل مستقل عن باقي الصفحة.
متى نستخدم article؟
يُستخدم article عندما يكون المحتوى قابلًا للنشر أو المشاركة لوحده، مثل مقالات المدونة أو منشورات الأخبار. محركات البحث تعطي أهمية كبيرة لهذا الوسم، لأنه يوضح أن المحتوى مستقل وله قيمة خاصة.
مثال عملي على div و section و article
<section>
<h2>قسم المقالات</h2>
<article>
<h3>تعلم HTML</h3>
<p>مقال تعليمي للمبتدئين.</p>
</article>
<div>
<p>إعلان أو عنصر تصميمي</p>
</div>
</section>
في هذا المثال استعملنا section لتجميع المحتوى، وarticle لتمثيل مقال مستقل، وdiv لعنصر لا يحمل معنى دلالي واضح.
الفرق الأساسي بين الوسوم الثلاثة
الفرق الأساسي أن div وسم غير دلالي، بينما section و article وسومان دلاليان. استعمال الوسوم الدلالية يساعد محركات البحث على فهم الصفحة بشكل أفضل، ويحسن من SEO.
أخطاء شائعة عند استخدام هذه الوسوم
من الأخطاء الشائعة استخدام div في كل مكان وتجاهل section و article. كما يخطئ البعض في استخدام article لمحتوى غير مستقل. اختيار الوسم المناسب يجعل الكود أنظف وأسهل في الفهم والصيانة.
مصادر إضافية للتعلم
للتوسع أكثر يمكنك الرجوع إلى التوثيق الرسمي في MDN Web Docs أو موقع W3Schools .
خلاصة
فهم الفرق بين div و section و article يساعدك على كتابة كود منظم واحترافي. استعمال الوسم المناسب في المكان المناسب هو خطوة مهمة في تعلم HTML الحديثة وبناء مواقع متوافقة مع معايير الويب.