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

مراجعة 08:12، 18 فبراير 2018

يُمثِّل العنصر <ol> قائمةً مرتبةً من العناصر، التي تُعرَض على شكل قائمة مرقمة.

مثال عن قائمة مرتبة <ol> فيها ثلاثة عناصر <li>:

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

بطاقة العنصر

تصنيفات المحتوى	محتوى تنظيمي.
المحتوى المسموح	عنصر `<li>` واحد أو أكثر، ويمكن لهذا العنصر أن يحتوي أيضًا على قوائم `<ol>` أو `<ul>` متشعبة داخله.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	`HTMLOListElement`

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

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

`compact`

هذه الخاصية المنطقية (boolean) تُحدِّد إذا كانت القائمة ستُعرَض متراصةً على بعضها، لكن تفسير هذه الخاصية يختلف حسب المتصفح ولا تعمل بشكل متناسق في جميع المتصفحات.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <ol> عبر أنماط CSS، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة line-height إلى 80%.

`reversed`

هذه الخاصية المنطقية (boolean) تُحدِّد إذا كنا نريد عرض العناصر بترتيب عكسي.

هذه الخاصية جديدة في HTML5، ولم تكن موجودة من قبل.

<ol reversed>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

`start`

هذه الخاصية -التي تقبل قيمًا عدديةً صحيحةً- تُحدِّد القيمة الرقمية لبدء ترقيم عناصر القائمة، وحتى لو كان ترقيم العناصر بالأرقام الرومانية مثل XXXI أو الأحرف، فيجب أن تكون قيمة هذه الخاصية رقمًا صحيحًا موجبًا؛ فلو أردنا بدء ترقيم العناصر من الحرف C فسنستخدم <ol start="3"‎>.

هذه الخاصية كانت مهملة في HTML 4 لكن أُعيد استخدامها في HTML5.

مثال عن قائمة مرتبة <ol> فيها ثلاثة عناصر مع استخدام الخاصية start لتحديد الرقم الذي سيبدأ الترقيم منه:

<ol start="7">
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

`type`

تستعمل هذه الخاصية لتحديد نوع الترقيم الذي يظهر قبل عناصر القائمة وهي:

a للحروف الصغيرة
A للحروف الكبيرة
i للأرقام الرومانية بالحالة الصغيرة
I للأرقام الرومانية بالحالة الكبيرة
1 للأرقام وهذه هي القيمة الافتراضية

ستستخدم قيمة هذه الخاصية لكل عناصر القائمة إلا إن اُستعمِلَت الخاصية type على عنصر <li> مُعيّن.

لاحظ أنَّ هذه الخاصية كانت مهملة في HTML 4 لكن أُعيد استخدامها في HTML5، لكن ما لم يكن ترقيم عناصر القائمة مهمًا جدًا (كما في الوثائق القانونية أو المستندات التقنية التي يُشار فيها إلى العناصر برقمها)، فمن المستحسن استخدام خاصية list-style-type في CSS بدلًا منها.

مثال عن قائمة مرتبة <ol> فيها ثلاثة عناصر مع استخدام الترقيم الروماني:

<ol type="i">
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

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

يُستخدم العنصر <ul> عادةً لعرض العناصر التي لترتيبها الرقمي أهمية، ويمكن عرض ذلك الترتيب بأي صيغة مثل الأرقام أو الأحرف أو الأرقام الرومانية أو غير ذلك، ومن المفضل ألّا يُعرَّف نمط الترقيم في شيفرة HTML وإنما في أنماط CSS وذلك باستخدام الخاصية list-style-type.
لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <ol> أو غير مرتبة <ul>).
عنصرا <ol> و <ul> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <ol> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <ol> وإن بقي على حاله فاستعمل <ul>.

أمثلة

مثال عن قائمة مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <li>:

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
    <ol>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني</li>
      <li>العنصر الفرعي الثالث</li>
    </ol>
  </li>            <!-- </li> هنا وسم الإغلاق -->
  <li>العنصر الثالث</li>
</ol>

مثال عن قائمة مرتبة يتشعب داخلها قائمة غير مرتبة <ul>:

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
    <ul>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني</li>
      <li>العنصر الفرعي الثالث</li>
    </ul>
  </li>            <!-- </li> هنا وسم الإغلاق -->
  <li>العنصر الثالث</li>
</ol>

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

تعرض أغلبية المتصفحات العنصر <ol> مع ضبط قيمة الخاصية display إلى block، وشكل الإشارة الخاصة بالقائمة list-style-type إلى decimal، مع ضبط الهوامش (margin-top و margin-bottom إلى 1em، و margin-left و margin-right إلى 0)، والحاشية اليسرى padding-left (أو اليمنى padding-right إذا كان اتجاه النص من اليمين إلى اليسار) إلى 40px:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

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

معيار HTML Living Standard.
مواصفة HTML5، أضافت هذه المواصفة الخاصيتين reversed و start، وأعادت استخدام الخاصية type.
مواصفة HTML 4.01، أهملت هذه المواصفة الخاصيتين compact و type.

@@ سطر 4: / سطر 4: @@
 مثال عن قائمة مرتبة <code><nowiki><ol></nowiki></code> فيها ثلاثة عناصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>: <syntaxhighlight lang="html">
 <ol>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item</li>
+   <li>العنصر الثاني</li>
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 54: / سطر 55: @@
 هذه الخاصية المنطقية (boolean) تُحدِّد إذا كنا نريد عرض العناصر بترتيب عكسي.
-هذه الخاصية جديدة في HTML5، ولم تكن موجودة من قبل.
+هذه الخاصية جديدة في HTML5، ولم تكن موجودة من قبل.<syntaxhighlight lang="html">
-==== مثال ====
-<syntaxhighlight lang="html">
 <ol reversed>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item</li>
+   <li>العنصر الثاني</li>
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>
@@ سطر 70: / سطر 68: @@
 هذه الخاصية كانت مهملة في HTML 4 لكن أُعيد استخدامها في HTML5.
-==== مثال ====
+مثال عن قائمة مرتبة <code><nowiki><ol></nowiki></code> فيها ثلاثة عناصر مع استخدام الخاصية <code>start</code> لتحديد الرقم الذي سيبدأ الترقيم منه:<syntaxhighlight lang="html">
-قائمة مرتبة <code><nowiki><ol></nowiki></code> فيها ثلاثة عناصر مع استخدام الخاصية <code>start</code> لتحديد الرقم الذي سيبدأ الترقيم منه:<syntaxhighlight lang="html">
 <ol start="7">
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item</li>
+   <li>العنصر الثاني</li>
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>
@@ سطر 89: / سطر 86: @@
 لاحظ أنَّ هذه الخاصية كانت مهملة في HTML 4 لكن أُعيد استخدامها في HTML5، لكن ما لم يكن ترقيم عناصر القائمة مهمًا جدًا (كما في الوثائق القانونية أو المستندات التقنية التي يُشار فيها إلى العناصر برقمها)، فمن المستحسن استخدام خاصية <code>list-style-type</code> في CSS بدلًا منها.
-==== مثال ====
 مثال عن قائمة مرتبة <code><nowiki><ol></nowiki></code> فيها ثلاثة عناصر مع استخدام الترقيم الروماني:<syntaxhighlight lang="html">
 <ol type="i">
-   <li>foo</li>
+   <li>العنصر الأول</li>
-   <li>bar</li>
+   <li>العنصر الثاني</li>
-   <li>spam</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>
@@ سطر 103: / سطر 99: @@
 == أمثلة ==
-مثال عن قائمة مرتبة متشعبة، مع ترك وضع وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>:<syntaxhighlight lang="html">
+مثال عن قائمة مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>:<syntaxhighlight lang="html">
 <ol>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item  <!-- closing </li> tag not here! -->
+   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
      <ol>
-       <li>second item first subitem</li>
+       <li>العنصر الفرعي الأول</li>
-       <li>second item second subitem</li>
+       <li>العنصر الفرعي الثاني</li>
-       <li>second item third subitem</li>
+       <li>العنصر الفرعي الثالث</li>
      </ol>
-   </li>            <!-- Here's the closing </li> tag -->
+   </li>            <!-- </li> هنا وسم الإغلاق -->
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>مثال عن قائمة مرتبة يتشعب داخلها قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>:<syntaxhighlight lang="html">
 <ol>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item  <!-- closing </li> tag not here! -->
+   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
      <ul>
-       <li>second item first subitem</li>
+       <li>العنصر الفرعي الأول</li>
-       <li>second item second subitem</li>
+       <li>العنصر الفرعي الثاني</li>
-       <li>second item third subitem</li>
+       <li>العنصر الفرعي الثالث</li>
      </ul>
-   </li>            <!-- Here's the closing </li> tag -->
+   </li>            <!-- </li> هنا وسم الإغلاق -->
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><nowiki><ol></nowiki></code> مع ضبط قيمة الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وشكل الإشارة الخاصة بالقائمة <code>[[CSS/list-style-type|list-style-type]]</code> إلى <code>decimal</code>، مع ضبط الهوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> إلى <code>1em</code>، و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code> إلى <code>0</code>)، والحاشية اليسرى <code>[[CSS/padding-left|padding-left]]</code> (أو اليمنى <code>[[CSS/padding-right|padding-right]]</code> إذا كان اتجاه النص من اليمين إلى اليسار) إلى <code>40px</code>:<syntaxhighlight lang="css">
+ol {
+  display: block;
+  list-style-type: decimal;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-ol-element HTML Living Standard].