وسم القسم <section>

وسم section يجمع محتوى مترابطًا موضوعيًّا تحت عنوان — أقسام صفحة الهبوط، فصول المستند الطويل.

يقع دلاليًّا بين div العام وarticle المستقل: section لمحتوى مترابط الموضوع يشكل جزءًا من كلٍّ أكبر — قسم «الخدمات» وقسم «الأسئلة الشائعة» في صفحة هبوط، أو فصول دليل طويل.

الاختبار الذهبي: هل لهذا الجزء عنوان طبيعي (h2 مثلًا)؟ إن نعم فهو مرشح section. أما إن كان محتوى يقف وحده لو نُشر منفصلًا (مقال، منتج) فهو article، وإن كان صندوق تنسيق بحت فهو div.

الصياغة

<section>
  <h2>عنوان القسم</h2>
  <p>محتواه المترابط...</p>
</section>

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<section style="border:2px solid #ede9fe; padding:16px; border-radius:10px">
  <h2 style="margin-top:0">لماذا The Code Fix؟</h2>
  <p>محتوى عربي أصلي وتفاعلي ومجاني.</p>
</section>

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

أهم الخصائص

الخاصية	الوظيفة
id	يجعل القسم هدف رابط داخلي ‎#id — أساس صفحات الهبوط الطويلة

💡 نصائح عملية

أعطِ كل section عنوان h2-h6 — قسم بلا عنوان مؤشر أن div أنسب
التنقل الداخلي السلس: روابط ‎#id مع scroll-behavior:smooth

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

استبدال كل div بـ section اعتباطًا — بلا عنوان وموضوع مترابط لا معنى له
استخدامه بدل article لمحتوى مستقل بذاته

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

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