# العنصر dl

> يُمثِّل العنصر قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض ال...

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

---

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

يُمثِّل العنصر `<dl>` قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).

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

| تصنيفات المحتوى | لا يوجد. |
| --- | --- |
| المحتوى المسموح | مجموعة أو أكثر من عناصر <dt> متبوعة بعنصر <dd> واحد أو أكثر؛ ويُسمَح باستخدام العنصر <div> فيه. |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
| واجهة DOM | HTMLDListElement |

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

| 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) في هذا العنصر.

## ملاحظات

لا تستعمل هذا العنصر (ولا عنصر `<ul>`) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.

لتغيير محاذاة محتوى عنصر `<dl>` فاستخدم خاصية `margin` في CSS.

## أمثلة

### مصطلح وحيد وشرحٌ عنه

هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:

```html
<dl>
  <dt>الموسوعة التقنية</dt>
  <dd>
  تهدف الموسوعة التقنية بتقديم أهم الشروحات والأخبار التقنية وأخبار الألعاب عبر موقعنا ومواقع التواصل 
  الإجتماعي عالم التقنية والإبداع الربح الإلكتروني
  </dd>
  <!-- تعاريف أخرى -->
</dl>
```

### عدِّة مصطلحات وشرحٌ وحيدٌ عنها

هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:

```html
<dl>
  <dt>الموسوعة التقنية</dt>
  <dt>coreiten</dt>
  <dd>
    تهدف الموسوعة التقنية لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة 
    وتقنيات 
    تطوير الويب والجوال.
  </dd>
  <!-- تعاريف أخرى -->
</dl>
```

### مصطلحٌ وحيد وأكثر من شرح عنه

هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:

```html
<dl>
  <dt>القهوة</dt>
  <dd>مشروب ساخن أسود</dd>
  
  <dt>الحليب</dt>
  <dd>مشروب بارد أبيض</dd>

  <dt>اليانسون</dt>
  <dd>مشروب ساخن أخضر</dd>
  
  <!-- تعاريف أخرى -->
</dl>
```

قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:

```css
dt::after {
  content: ": ";
}
```

### وضع كل مصطلح وشرحه ضمن عنصر <div>

أما هذا المثال فهو عن قائمة الوصف السابقة لكن مع وضع كل مصطلح وشرحه ضمن عنصر `<div>`:

```html
<dl>
  <div>
    <dt>القهوة</dt>
    <dd>مشروب ساخن أسود</dd>
  </div>
  
  <div>
    <dt>الحليب</dt>
    <dd>مشروب بارد أبيض</dd>
  </div>

  <div>
    <dt>اليانسون</dt>
    <dd>مشروب ساخن أخضر</dd>
  </div>
  
    <!-- تعاريف أخرى -->
</dl>
```

## التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر `<dl>` مع ضبط الخاصية `display` إلى `block`، والهوامش العلوية (`margin-top`) والسفلية (`margin-bottom`) إلى `1em`، والهامش اليساري (`margin-left`) واليميني (`margin-right`) إلى `0`:

```css
dl {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
```

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

- [العنصر](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)