بداية لو وصلت لمرحلة إنك تحفظ وسم div وتستخدمه في كل مكان… فالمقال هذا راح يفيدك
خلّينا نفهم شو يعنى العناصر الدلالية (Semantic Elements) في HTML
شو هيا العناصر الدلالية (Semantic Elements)؟
العنصر الدلالي هو عنصر HTML اسمه يوضّح نوع المحتوى الموجود بداخله، مثل:
header, nav, main, section, article, aside, footerبدل ما يكون عندك عشرات عناصر div بدون أي معنى، العناصر الدلالية تعطيك فوائد مهمّة:
- توضيح الكود أكثر
لما تفتح الملف راح تفهمه من أول نظرة. - تحسين محركات البحث (SEO)
محركات البحث تفهم بنية الصفحة بشكل أفضل. - دعم أفضل لبرامج قراءة الشاشة (Accessibility)
خصوصًا لذوي الاحتياجات الخاصة.
متى تستخدم وسم الـ div؟
div هو عنصر عام (Generic Container)
حيث يتم استخدامه عندما يكون في عنصر دلالي مناسب، أو لما يكون هدفك فقط التنسيق والتصميم بواسطة css أو JavaScript.
استخدم div عندما:
- تحتاج “صندوق” لتجميع عناصر لأغراض التصميم فقط
- ما في معنى منطقي خاص لهذا الجزء
- تعمل Wrapper للصفحة أو لقسم معيّن من أجل CSS / Flex / Grid
لا تستخدم div:
- كبديل عن كل العناصر الدلالية
- لتقسيم محتوى له معنى واضح (مقال، قسم خدمات، آراء عملاء…)
- إذا حسّيت إنك تكتب تعليق يشرح وظيفة الـ div… غالبًا اخترت العنصر الغلط
متى تستخدم وسم الـ section؟
section هو قسم منطقي من المحتوى داخل الصفحة
أمثلة شائعة:
- من نحن
- خدماتنا
- آراء العملاء
- مقالات مميزة
كل هذه أقسام واضحة كتابة الوسم section هو الاختيار الصحيح.
ملاحظات لازم تاخذها بعين الاعتبار:
- كل section يُفضّل أن يحتوي على عنوان (h2 أو h3)
- يُستخدم عندما يكون المحتوى جزءًا من الصفحة وليس كيانًا مستقلًا
مثال عملي:
صفحة كورس HTML تحتوي على:
- مقدمة عن الكورس
- ماذا ستتعلم؟
- لمن هذا الكورس؟
كل عنصر منها مناسب جدًا يكون داخل section.
متى تستخدم article؟
article هى قطعة محتوى مستقلة بذاتها
تقدر تأخذها وتعرضها في مكان آخر بدون ما تفقد معناها.
أمثلة واضحة:
- مقالة مدونة
- خبر في موقع إخباري
- منشور في منتدى أو بطاقة درس مستقلة
باختصار
كل مقال في المدونة = article
مجموعة مقالات = section تحتوي عدّة article
كيف تُستخدم معًا في صفحة حقيقية؟
تخيّل صفحة مقالة في المدونة:
على سبيل المثال البنية المنطقية:
- header
شعار الموقع + روابط عليا - nav
قائمة التنقل الرئيسية - main
المحتوى الأساسي للصفحة - article
المقال نفسه (العنوان + المحتوى + تاريخ النشر) - section
مقالات مشابهة (تحتوي عدة article) - aside
شريط جانبي (عن الكاتب / روابط / إعلان) - footer
حقوق النشر + روابط سفلية
ملاحظة هامة:
- article للمحتوى المستقل
- section لتجميع محتوى مترابط
- aside للمحتوى الجانبي
- div فقط عند الحاجة للتنسيق
نصائح لازم تاخذها بعين الاعتبار
- لو كتبت div ومعاه تعليق يشرح وظيفته → غالبًا استخدم section
- لا تفرط في كتابة section بدون سبب
- article غالبًا له عنوان خاص به ومحتوى قابل للمشاركة
الخلاصة
- العناصر الدلالية ما فيها أي تعقيد بالعكس هي طريقة ذكية تكتب فيها كود نظيف وواضح.
- استخدم div عند الحاجة فقط، وخلي section و article تعبر عن المعنى الحقيقي للمحتوى.