HTMLالوسم <ol>

تعريفه

نستخدم الوسم <ol> لعرض قائمة مرتبة ( Ordered ) في الصفحة و نقصد بذلك عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها.
من أهم ما يميز هذه القوائم أنه يمكنك عرض الترقيم بالشكل الذي تريده, فمثلاً يمكنك عرض أرقام عادية, أحرف أبجدية, أرقام رومانية إلخ..

أي عنصر نريد إضافته في القائمة يجب وضعه بداخل وسم <li> كالتالي.

<ol>
    <li>element-1</li>
    <li>element-2</li>
    <li>element-3</li>
</ol>

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <ol>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية start

يمكن إضافتها للوسم لتحديد من أي رقم سيتم البدء بترقيم العناصر.
ملاحظة: إفتراضياً، ترقيم العناصر يبدأ من 1.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية type

يمكن إضافتها للوسم لتحديد نوع الترقيم (أبجدي، عددي، روماني إلخ..).
ملاحظة: إفتراضياً، الترقيم العددي هو المعتمد.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية type لتحديد نوع الترقيم الذي سيتم إعتماده.

الخاصية reversed

يمكن إضافتها للوسم لجعل عناصره تترقم بشكل عكسي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بعرض قائمة نوعها <ol> وضعنا فيها 3 عناصر.

<ol>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

في المثال التالي قمنا بعرض قائمتين مع تغيير نوع الترقيم في كل منهما بواسطة الخاصية type.

<ol type="A">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

<ol type="I">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

في المثال التالي قمنا بعرض قائمتين مع تحديد من أي رقم سيتم البدء بالترقيم فيهما بواسطة الخاصية start.

<ol type="1" start="3">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

<ol type="A" start="3">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

في المثال التالي قمنا بعرض قائمة عددية مع تحديد أن الترقيم فيها سيكون بشكل عكسي بواسطة reversed.

<ol type="1" reversed>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

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

نصائح و ملاحظات

يمكنك إظهار القوائم بشكل متداخل بحيث يظهر تحت العنصر قائمة تابعة له، عندها أي عنصر تريد وضع قائمة خاصة له يجب أن تعرّف القائمة بداخل العنصر نفسه.

<ol>
    <!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
    <li>Front-End
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ol>
    </li>
    <!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
    <li>Back-End
        <ol>
            <li>MySQL</li>
            <li>Aspnetcore</li>
        </ol>
    </li>
</ol>

نوع الترقيم يفضّل تحديده بواسطة CSS لأنها تعطيك خيارات ترقيم أكثر، فمثلاً تتيح لك عرض ترقيم عربي.

ol {
    list-style-type: arabic-indic;
}