Lesson 17 / الدرس 17

Description lists / قوائم الوصف

Use <dl> when you have a set of terms and their meanings — each <dt> is a term, each <dd> is what it means.

استخدم <dl> عندما يكون لديك مجموعة من المصطلحات ومعانيها — كل <dt> مصطلح، وكل <dd> معناه.

A description list pairs a term with what it means. HTML gives you three tags for it: <dl> wraps the whole list, <dt> holds one term, and <dd> holds its description. Every <dt> is followed by one or more <dd>.

قائمة الوصف تربط كل مصطلح بمعناه. وتعطيك HTML ثلاثة وسوم لذلك: <dl> يحيط بالقائمة كلها، و <dt> يحمل مصطلحًا واحدًا، و <dd> يحمل تعريفه. وكل <dt> يتبعه واحد أو أكثر من <dd>.

<dl>
    <dt>Weight</dt>
    <dd>500 grams</dd>
    <dt>Origin</dt>
    <dd>Amman, Jordan</dd>
</dl>

Product details for a bag of dates: two terms, each with one description.

When a description list beats a table

A table needs real columns — every row must line up the same fields side by side. A description list has no columns to line up; each pair simply stacks under the one before it. That makes it the better choice for a short glossary or a simple set of facts, especially on a phone screen, where a wide table forces the visitor to scroll sideways and a description list never does.

One term, several descriptions

A single <dt> can be followed by more than one <dd>. Each extra <dd> adds another description under the same term, instead of repeating the term to add a second fact.

يمكن أن يتبع <dt> واحدًا أكثر من <dd>. فكل <dd> إضافي يضيف وصفًا آخر تحت المصطلح نفسه، بدل تكرار المصطلح لإضافة حقيقة ثانية.

<dl>
    <dt>Phone</dt>
    <dd>06-1234567</dd>
    <dd>079-1234567</dd>
</dl>

One term, "Phone", with two numbers — two <dd> elements in a row, both under the same <dt>.

مصطلح واحد، "Phone"، وله رقمان — عنصرا <dd> متتاليان، وكلاهما تحت <dt> نفسه.

لا يقتصر <dd> على سطر قصير واحد — يمكنه أن يحمل جملة كاملة، أو عدة جمل، أو حتى قائمة أخرى.

لا تلجأ إلى <dl> لمجرد أن المتصفح يزيح <dd> عن الهامش تلقائيًا وأنت تريد شكلًا مُزاحًا. فإن لم يكن المحتوى فعلًا مصطلحًا وتعريفه، فتلك الإزاحة مجرد مصادفة لا سبب كافٍ — استخدم نصًا عاديًا أو <ul> بدلًا منها، واحتفظ بـ <dl> لأزواج المصطلح والوصف الحقيقية.

Tag	What it does
<dl>	Wraps the whole set of term-description pairs
<dt>	One term
<dd>	One description of the term before it

The tags used in this lesson.

Try it live / جرّب بنفسك

<h1>Product details</h1>

<dl>
    <dt>Write a term here</dt>
    <dd>Write its description here</dd>
</dl>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which tag wraps one term in a description list?

2. A shop has two phone numbers under the term "Phone". How do you write that?

3. Why might a short glossary of five words fit better as a <dl> than as a five-row table on a phone?

لماذا قد يكون مسرد قصير من خمس كلمات أنسب كـ <dl> من جدول بخمسة صفوف على الهاتف؟

Your task / مهمتك

Build a product info sheet for something you sell or own, using <dl>. Include at least three terms, and give one of them two <dd> instead of one.

ابنِ ورقة معلومات منتج لشيء تبيعه أو تملكه، باستخدام <dl>. أضف ثلاثة مصطلحات على الأقل، واجعل لأحد المصطلحات وصفين بدل وصف واحد، أي <dd> مرتين متتاليتين.

One <dl> wrapping everything <dl> واحد يحيط بكل شيء
At least three <dt>/<dd> pairs ثلاثة أزواج <dt>/<dd> على الأقل
One term followed by two <dd> in a row مصطلح واحد يتبعه <dd> مرتين متتاليتين