HTML ol Tag
HTML ol Tag – يحدد العنصر <ol> قائمة مرتبة بالعناصر. وعادة ما يتم عرضها كقائمة رقمية أو حروف أبجدية.
HTML ol Tag
مثال للتوضيح
قائمة مرتبة ببعض العناصر:
- One
- Two
- Three
- Four
- Five
<ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ol>
- One
- Two
- Three
- Four
- Five
الوسم <li> يٌستخدم لتحديد كل عنصر بالقائمة.
يمكنك إستخدام الوسم <ul> للعناصر الغير المرتبة.
أمثلة – <ol>
1) استخدام سمة type لتعيين نوع العلامة إلى الأحرف الأبجدية الكبيرة بدلًا من الأرقام
<ol type="A"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ol>
- One
- Two
- Three
- Four
- Five
يٌفضل إستخدام خاصية list-style-type الموجوده فى CSS بدلًا من إستخدام السمة type.
2) استخدام سمة reversed لعكس ترتيب القائمة
<ol reversed="reversed"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ol>
- One
- Two
- Three
- Four
- Five
3) استخدام سمة start لتحديد بداية العد
<ol start="2"> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ol>
- Two
- Three
- Four
- Five
4) قائمة متداخلة Nested List (ذات مستوى واحد)
<ol>
<li>Category 1</li>
<li>Category 2
<ol>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
<li>Child Category 4</li>
</ol>
</li>
<li>Category 3</li>
<li>Category 4
<ol>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
<li>Child Category 4</li>
</ol>
</li>
</ol>
- Category 1
- Category 2
- Child Category 1
- Child Category 2
- Child Category 3
- Child Category 4
- Category 3
- Category 4
- Child Category 1
- Child Category 2
- Child Category 3
- Child Category 4
5) قائمة متداخلة Nested List (أكثر من مستوى)
<ol>
<li>Category 1</li>
<li>Category 2
<ol>
<li>Child cat 1 from Category 2
<ol>
<li>Child Cat 1 from child Cat 1</li>
<li>Child Cat 2 from child Cat 1</li>
<li>Child Cat 2 from child Cat 1</li>
</ol>
</li>
<li>Child cat 2 from Category 2</li>
</ol>
</li>
<li>Category 3</li>
<li>Category 4
<ol>
<li>Child cat 1 from Category 4
<ol>
<li>Child Cat 1 from child Cat 1</li>
<li>Child Cat 2 from child Cat 1</li>
<li>Child Cat 2 from child Cat 1</li>
</ol>
</li>
<li>Child cat 2 from Category 4</li>
</ol>
</li>
</ol>
- Category 1
- Category 2
- Child cat 1 from Category 2
- Child Cat 1 from child Cat 1
- Child Cat 2 from child Cat 1
- Child Cat 2 from child Cat 1
- Child cat 2 from Category 2
- Child cat 1 from Category 2
- Category 3
- Category 4
- Child cat 1 from Category 4
- Child Cat 1 from child Cat 1
- Child Cat 2 from child Cat 1
- Child Cat 2 from child Cat 1
- Child cat 2 from Category 4
- Child cat 1 from Category 4
السمات المحددة – Specific Attributes
يدعم الوسم <ol> هذه السمات:
| السمة | القيمة | الوصف |
|---|---|---|
| reversed | reversed | تحدد أنه يجب عكس ترتيب القائمة. |
| start | number | تحدد قيمة البداية الرقمية لقائمة مرتبة. |
| type | A a I i 1 | يحدد نوع العلامة التي سيتم استخدامها في القائمة. |
السمات العامة – Global Attributes
الوسم <ol> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.
سمات الحدث – Event Attributes
يدعم وسم <ol> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.
إقرأ أيضًا – HTML <ol> Tag
تعرف على المزيد من المعلومات حول: HTML lists.
دعم المتصفحات
 |  |  |  |  |
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!