الفرق بين المراجعتين ل"HTML/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;
}

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

معيار HTML Living Standard.
مواصفة HTML 5.1.
مواصفة HTML5.

@@ سطر 6: / سطر 6: @@
 هذه مثالٌ عن شيفرة قديمة تستعمل العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لتقسيم الصفحة:<code></code><syntaxhighlight lang="html">
 <div>
-   <h1>Heading</h1>
+   <h1>العنوان</h1>
-   <p>content</p>
+   <p>المحتوى</p>
 </div>
 </syntaxhighlight>وإذا أردنا استخدام العنصر <code><section></code> فستبدو الشيفرة كما يلي:<syntaxhighlight lang="html">
 <section>
-   <h1>Heading</h1>
+   <h1>العنوان</h1>
-   <p>content</p>
+   <p>المحتوى</p>
 </section>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 56: / سطر 57: @@
 * إذا كان من الممكن نشر محتوى عنصر <code><section></code> بشكل مستقل عن بقية المستند، فاستخدم العنصر <code>[[HTML/article|<article>]]</code> بدلًا منه.
 * لا تستعمل العنصر <code><section></code> كحاوية عامة وشاملة، فتلك وظيفة العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، خصوصًا إذا كان التقسيم لأغراض التنسيق. القاعدة العامة هي استخدام العنصر <code><section></code> عندما نريد أن يظهر قسمٌ جديد في تخطيط الصفحة.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><section></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
+section {
+  display: block;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==