العنصر <ol>
يُمثِّل العنصر <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;
}