العنصر <ol>

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

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

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</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>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

start

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

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

مثال

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

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

type

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

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

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

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

مثال

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

<ol type="i">
  <li>foo</li>
  <li>bar</li>
  <li>spam</li>
</ol>

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

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

أمثلة

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

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

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

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

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

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