<section>: عنصر SECTION
آخر تحديث: 2026-10-13
<section>عنصر SECTION
يمثل قسمًا مستقلاً من المحتوى، عادةً مع عنوان. جيد لتجميع المحتوى المرتبط.
| الفئة | دلالي |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </section> وسم |
| الحالة | قياسي |
📝 البنية
<section>محتوى القسم</section>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <section> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： إذا كان الأمر للتنسيق فقط فاستخدم div؛ استخدم section فقط عندما تكون هناك دلالة تقسيم حقيقية.
❓ الأسئلة الشائعة
Qما الفرق بين section و div؟
A
<section> «تجميع محتوى ذي موضوع» يجب أن يقترن غالبًا بعنوان (h2-h6)؛ بينما <div> بلا دلالة ووُجد للتنسيق فقط. إن كان المحتوى موضوعًا قائمًا بذاته يحتاج عنوانًا فاستخدم section، وإن كان مجرد غلاف تنسيقي فاستخدم div.Qكيف تختار بين section و article؟
Aالمحتوى القائم بذاته وذي المعنى خارج الصفحة (مقالة، تعليق، بطاقة منتج) يستخدم
<article>؛ والتجميع الفصلي فقط (مثل «مقدمة» و«الاستخدام» و«الأسئلة الشائعة») يستخدم <section>. وعند الحيرة، section هو الخيار الأكثر تحفظًا.Qهل يجب أن يملك section عنوانًا؟
Aمستحسن بشدة. تقول المواصفات إن موضوع section «يجب أن يظهر عادة في عنوان»، وsection بلا عنوان يبقى بدلالة غامضة في مخطط المستند. وإن لم يكن هناك مطلقًا مطلب عنوان فالأرجح أن الصواب استبداله بـ
<div>.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
