الفرق بين المراجعتين لصفحة: «HTML/section»

من موسوعة حسوب
ط استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1'
إضافة قسمين وتعديل الأمثلة
 
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 6: سطر 6:
هذه مثالٌ عن شيفرة قديمة تستعمل العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لتقسيم الصفحة:<code></code><syntaxhighlight lang="html">
هذه مثالٌ عن شيفرة قديمة تستعمل العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لتقسيم الصفحة:<code></code><syntaxhighlight lang="html">
<div>
<div>
   <h1>Heading</h1>
   <h1>العنوان</h1>
   <p>content</p>
   <p>المحتوى</p>
</div>
</div>
</syntaxhighlight>وإذا أردنا استخدام العنصر <code><section></code> فستبدو الشيفرة كما يلي:<syntaxhighlight lang="html">
</syntaxhighlight>وإذا أردنا استخدام العنصر <code><section></code> فستبدو الشيفرة كما يلي:<syntaxhighlight lang="html">
<section>
<section>
   <h1>Heading</h1>
   <h1>العنوان</h1>
   <p>content</p>
   <p>المحتوى</p>
</section>
</section>
</syntaxhighlight>
</syntaxhighlight>


== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 56: سطر 57:
* إذا كان من الممكن نشر محتوى عنصر <code><section></code> بشكل مستقل عن بقية المستند، فاستخدم العنصر <code>[[HTML/article|<article>]]</code> بدلًا منه.
* إذا كان من الممكن نشر محتوى عنصر <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>[[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>


==مصادر ومواصفات==
==مصادر ومواصفات==
سطر 61: سطر 69:
*مواصفة [https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#the-section-element HTML 5.1].
*مواصفة [https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#the-section-element HTML 5.1].
*مواصفة [http://www.w3.org/TR/html5/sections.html#the-section-element HTML5].
*مواصفة [http://www.w3.org/TR/html5/sections.html#the-section-element HTML5].
[[تصنيف:HTML]]
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Content sectioning]]
[[تصنيف:HTML Content sectioning|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 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;
}

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