لیست‌های تعریفی (dl، dt، dd)

dl، dt، dd: وقتی می‌خوای اصطلاح رو تعریف کنی

تو دو درس قبل با ul و ol آشنا شدیم که برای فهرست‌های ساده و مرحله‌ای مناسب بودن. اما یه نوع سومی از لیست هم داریم که کاربرد کاملاً متفاوتی داره: لیست تعریفی، یا همون Description List. این نوع لیست وقتی به کار میاد که بخوای یه سری اصطلاح یا مفهوم رو همراه با توضیحشون نمایش بدی؛ مثل یه واژه‌نامه یا فهرست پرسش و پاسخ.

سه تگ اصلی این بخش

لیست تعریفی از سه تگ تشکیل شده که همیشه با هم کار می‌کنن:

• dl (Description List): ظرف کلی لیست تعریفی.
• dt (Description Term): خود اصطلاح یا واژه‌ای که قراره تعریف بشه.
• dd (Description Details): توضیح یا تعریف مربوط به همون اصطلاح.

یه مثال ساده

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری برای ساختاردهی محتوای صفحات وب.</dd>

  <dt>CSS</dt>
  <dd>زبانی برای استایل‌دهی و ظاهرسازی صفحات وب.</dd>
</dl>

بیا این کد رو بررسی کنیم: تگ dl کل مجموعه رو در بر می‌گیره. هر dt یه اصطلاح جدید رو معرفی می‌کنه (مثل HTML و CSS)، و هر dd بلافاصله بعدش، توضیح همون اصطلاح رو ارائه می‌ده. مرورگر به‌صورت پیش‌فرض، dt رو بدون تورفتگی و dd رو با یه تورفتگی از سمت راست (تو حالت rtl) نمایش می‌ده تا رابطه‌ی «اصطلاح - توضیح» از نظر بصری هم مشخص باشه.

آیا می‌شه یه اصطلاح چند تا تعریف داشته باشه؟

<dl>
  <dt>جاوااسکریپت</dt>
  <dd>یک زبان برنامه‌نویسی برای افزودن تعامل به صفحات وب.</dd>
  <dd>یکی از سه فناوری اصلی وب، در کنار HTML و CSS.</dd>
</dl>

بله، کاملاً مجازه. تو این مثال، یه dt («جاوااسکریپت») داریم که دو تا dd جداگانه براش نوشته شده؛ یعنی می‌تونی چند توضیح یا تعریف مختلف برای یه اصطلاح واحد بیاری.

آیا می‌شه چند اصطلاح، یک تعریف مشترک داشته باشن؟

<dl>
  <dt>گربه</dt>
  <dt>سگ</dt>
  <dd>از رایج‌ترین حیوانات خانگی در سراسر جهان.</dd>
</dl>

این حالت هم مجازه؛ وقتی چند تا dt پشت‌سرهم بیان و بعدش یه dd، یعنی اون توضیح به تمام اصطلاحات قبل از خودش (تا رسیدن به dt یا dd دیگه) مرتبطه.

کاربرد رایج: بخش پرسش و پاسخ (FAQ)

<dl>
  <dt>آیا امکان مرجوع‌کردن کالا وجود دارد؟</dt>
  <dd>بله، تا هفت روز پس از خرید امکان مرجوع‌کردن کالا وجود دارد.</dd>

  <dt>هزینه‌ی ارسال چقدر است؟</dt>
  <dd>ارسال برای خریدهای بالای پانصد هزار تومان رایگان است.</dd>
</dl>

یکی از رایج‌ترین کاربردهای امروزی dl، ساخت بخش‌های پرسش و پاسخ (FAQ) هست؛ چون از نظر معنایی دقیقاً همون رابطه‌ی «سؤال - جواب» رو داره که رابطه‌ی «اصطلاح - تعریف» dl هم همینه.

کاربرد دیگر: مشخصات فنی یک محصول

<dl>
  <dt>وزن</dt>
  <dd>۱۸۰ گرم</dd>

  <dt>رنگ</dt>
  <dd>مشکی</dd>

  <dt>گارانتی</dt>
  <dd>۱۸ ماه</dd>
</dl>

این ساختار برای نمایش مشخصات فنی محصولات (مثل صفحات فروشگاهی) هم خیلی مناسبه، چون هر ویژگی (وزن، رنگ، گارانتی) دقیقاً مثل یه «اصطلاح» عمل می‌کنه و مقدارش مثل «تعریف» اون.

تفاوت dl با ul و ol

ویژگی	ul / ol	dl
ساختار	فهرست ساده از آیتم‌های مستقل	جفت‌های اصطلاح و تعریف
تگ فرزند	li	dt و dd
مثال مناسب	لیست خرید، مراحل انجام کار	واژه‌نامه، پرسش و پاسخ، مشخصات فنی

یه اشتباه رایج: استفاده از dl فقط برای ظاهر

بعضی‌ها از dl فقط به‌خاطر ظاهر تورفتگی‌دارش استفاده می‌کنن، بدون اینکه محتوا واقعاً رابطه‌ی «اصطلاح - تعریف» داشته باشه. این کار اشتباهه؛ اگه محتوات این رابطه‌ی معنایی رو نداره، بهتره از ساختارهای دیگه (مثل ul معمولی یا حتی جدول) استفاده کنی.

چند اشتباه رایج

• استفاده از dl برای فهرست‌های ساده که رابطه‌ی «اصطلاح - تعریف» ندارن.
• فراموش‌کردن اینکه هر dt باید حداقل یه dd مرتبط داشته باشه.
• استفاده از ul یا ol به‌جای dl برای محتوایی مثل واژه‌نامه یا پرسش و پاسخ که ذاتاً ساختار «اصطلاح - تعریف» دارن.

بهترین روش‌ها

• برای واژه‌نامه‌ها، بخش‌های پرسش و پاسخ، و مشخصات فنی محصولات، از dl استفاده کن.
• هر dt رو بلافاصله با یک یا چند dd مرتبط همراه کن.
• اگه محتوات صرفاً یه فهرست ساده‌ست، بدون رابطه‌ی اصطلاح-تعریف، از ul یا ol استفاده کن، نه dl.

نکته‌ی سئو

استفاده از dl برای بخش‌های پرسش و پاسخ می‌تواند به موتورهای جستجو کمک کند تا رابطه‌ی سؤال و جواب را بهتر تشخیص دهند، که در برخی موارد امکان نمایش این محتوا را به‌صورت قطعه‌ی برجسته در نتایج جستجو افزایش می‌دهد.

نکته‌ی دسترسی‌پذیری

صفحه‌خوان‌ها هنگام خواندن یک dl، رابطه‌ی میان dt و dd مرتبط را به کاربر منتقل می‌کنند؛ این موضوع به کاربران کم‌بینا کمک می‌کند تفاوت بین یک اصطلاح و توضیح مربوط به آن را بهتر درک کنند، به‌خصوص در فهرست‌های طولانی مثل مشخصات فنی یا پرسش و پاسخ.

جمع‌بندی

لیست تعریفی از سه تگ dl، dt و dd تشکیل می‌شود و برای نمایش محتوایی با ساختار «اصطلاح - تعریف» مناسب است، مانند واژه‌نامه، بخش‌های پرسش و پاسخ و مشخصات فنی محصولات. این ساختار با ul و ol که برای فهرست‌های ساده مناسب هستند، تفاوت معنایی دارد و نباید صرفاً برای اهداف ظاهری جایگزین آن‌ها شود.