# العنصر ol

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

- Canonical URL: https://coreiten.com/article/العنصر-ol
- Language: ar
- Section: HTML
- Author: Sami
- Published: 2024-09-26T00:00:00+03:00
- Modified: 2026-01-30T21:25:17+03:00
- Publisher: CoreITen (https://coreiten.com)
- Keywords: العنصر, ما هو العنصر ol في html, شرح العنصر ol, مثال عن العنصر ol, خاصيات العنصر ol, استخدام العنصر ol في html, بطاقة العنصر ol, تعلم html من الصفر, تصميم مواقع, برمجة مواقع, لغة html

---

**العنصر** **<ol>**

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

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

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

## بطاقة العنصر

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

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

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

## الخاصيات

يمكن استخدام [الخاصيات العامة](https://coreiten.com/article/%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D8%A7%D9%85%D8%A9) في هذا العنصر.

### compact

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

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

### reversed

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

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

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

### start

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

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

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

```html
<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>` فيها ثلاثة عناصر مع استخدام الترقيم الروماني:

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

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

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

## أمثلة

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

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

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

```html
<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`:

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

## مواضيع ذات صلة

- [العنصر](https://coreiten.com/topic/%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1)
- [تعلم html من الصفر](https://coreiten.com/topic/%D8%AA%D8%B9%D9%84%D9%85-html-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1)
- [تصميم مواقع](https://coreiten.com/topic/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [برمجة مواقع](https://coreiten.com/topic/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [لغة html](https://coreiten.com/topic/%D9%84%D8%BA%D8%A9-html)