الفرق بين المراجعتين لصفحة: «HTML/section»
< HTML
ط تغيير ترتيب التصنيفات |
إضافة قسمين وتعديل الأمثلة |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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> | <h1>العنوان</h1> | ||
<p> | <p>المحتوى</p> | ||
</div> | </div> | ||
</syntaxhighlight>وإذا أردنا استخدام العنصر <code><section></code> فستبدو الشيفرة كما يلي:<syntaxhighlight lang="html"> | </syntaxhighlight>وإذا أردنا استخدام العنصر <code><section></code> فستبدو الشيفرة كما يلي:<syntaxhighlight lang="html"> | ||
<section> | <section> | ||
<h1> | <h1>العنوان</h1> | ||
<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}}]] | ||
[[تصنيف: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>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي. |
|---|---|
| المحتوى المسموح | محتوى تنظيمي. |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي.
لاحظ أنَّ العنصر |
| واجهة 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.