العنصر <section>

من موسوعة حسوب
مراجعة 04:21، 18 فبراير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة قسمين وتعديل الأمثلة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

يُمثِّل العنصر <section> قسمًا مستقلًا له وظيفة خاصة به ضمن مستند HTML، ويكون له ترويسة عادةً، وهذا القسم ليس له وسمٌ خاصٌ يمكن أن يمثِّله.

فمثلًا يمكن وضع روابط التنقل ضمن عنصر <nav>، لكن قائمةً بنتائج البحث أو خريطة مع عناصر التحكم الخاصة بها لا تملك عناصر HTML محدَّدة، لذا يمكن وضعها ضمن عنصر <section>.

هذه مثالٌ عن شيفرة قديمة تستعمل العنصر <div> لتقسيم الصفحة:

<div>
  <h1>العنوان</h1>
  <p>المحتوى</p>
</div>

وإذا أردنا استخدام العنصر <section> فستبدو الشيفرة كما يلي:

<section>
  <h1>العنوان</h1>
  <p>المحتوى</p>
</section>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح محتوى تنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.

لاحظ أنَّ العنصر <section> لا يجوز أن يكون ابنًا للعنصر <address>.

واجهة DOM HTMLElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
5 4 مدعوم 4.1 11.10

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

  • يجب أن يكون كل عنصر <section> مُعرَّفًا (identified)، ويتم ذلك عمومًا بتضمين ترويسة (العناصر <h1>‏-<h6>) ضمن العنصر <section>.
  • إذا كان من الممكن نشر محتوى عنصر <section> بشكل مستقل عن بقية المستند، فاستخدم العنصر <article> بدلًا منه.
  • لا تستعمل العنصر <section> كحاوية عامة وشاملة، فتلك وظيفة العنصر <div>، خصوصًا إذا كان التقسيم لأغراض التنسيق. القاعدة العامة هي استخدام العنصر <section> عندما نريد أن يظهر قسمٌ جديد في تخطيط الصفحة.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <section> مع ضبط الخاصية display إلى block:

section {
  display: block;
}

مصادر ومواصفات