لیست های توصیفی در HTML – المان های <dt> <dl> و <dd>

لیست های توصیفی (Description lists) به لیست‌هایی گفته می‌شود که در آن‌ها یک یا چند توصیف به یک یا چند اصطلاح نسبت داده می‌شود. از جمله این لیست‌ها می‌توان به لیست واژه ها و مفهوم متناظر با هر واژه یا فهرستی از سوال و جواب‌ها اشاره کرد. در HTML برای ایجاد لیست های توصیفی از المان <dl> به عنوان المان دربرگیرنده لیست استفاده می‌شود. هر اصطلاح (یا term) در لیست نیز توسط یک المان <dt> (مخفف description term) و هر توصیف هم با کمک یک المان <dd> (مخفف description definition) مشخص می‌شود.

به عبارت ساده‌تر، هر لیست توصیفی با یک تگ <dl> شروع و با یک تگ </dl> به پایان می‌رسد. مابین این دو تگ، المان های <dt> برای تعیین اصطلاح ها و المان های <dd> برای تعیین توصیف های متناظر قرار می‌گیرند.

در حالت ساده، در لیست توصیفی برای هر اصطلاح یک توصیف تعیین می‌شود. به عبارت بهتر ابتدا اصطلاح و توصیف اول، سپس اصطلاح و توصیف دوم، اصطلاح و توصیف سوم و الی آخر به ترتیب یکی پس از دیگری درج می‌شوند. در مثال زیر نمونه‌ای از لیست های توصیفی ساده در HTML را مشاهده می‌کنید که در آن برای هرکدام از واژه‌های ویروس و رایانامه یک توصیف مجزا ارائه شده است:

<dl>
  <dt>ویروس</dt>
  <dd>نوعی برنامه کامپیوتری که می‌تواند خود را کپی کند و معمولا اهداف شرورانه‌ای را دنبال می‌کند</dd>
  <dt>رایانامه</dt>
  <dd>روشی برای انتقال پیام میان افراد با استفاده از دستگاه های الکترونیکی و شبکه های رایانه ای است</dd>
</dl>

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

چند نکته در مورد ایجاد لیست های توصیفی در HTML

در لیست های توصیفی اچ‌تی‌ام‌ال، محدودیتی در تعداد توصیف‌هایی که به یک یا چند اصطلاح نسبت می‌دهید وجود ندارد. برای مثال می‌توانید چند توصیف را برای یک اصطلاح درنظر بگیرید یا برعکس یک توصیف را به چند اصطلاح نسبت دهید. در حالت اول کافیست پس از المان <dt> یا اصطلاح موردنظر، چند المان <dd> به عنوان توصیف‌های متناظر با اصطلاح درج کنید. در مثال زیر می‌توانید یک قطعه کد نمونه برای ایجاد چنین لیستی را مشاهده کنید.

<dl>
  <dt>ویروس</dt>
  <dd>نوعی عامل عفونت زا که می‌تواند خود را داخل سلول‌های زنده میزبان تکثیر کند</dd>
  <dd>نوعی برنامه کامپیوتری که می‌تواند خود را کپی کند و معمولا اهداف شرورانه‌ای را دنبال می‌کند</dd>
  <dt>رایانامه</dt>
  <dd>روشی برای انتقال پیام میان افراد با استفاده از دستگاه های الکترونیکی و شبکه های رایانه ای است</dd>
</dl>

در مثال فوق برای واژه ویروس، دو توصیف یا مفهوم بیان شده است. نتیجه این قطعه کد را در ادامه مشاهده می‌کنید.

برای حالت دوم هم می‌توانید چند المان <dt> به عنوان اصطلاح ها و پس از آن یک المان <dd> به عنوان توصیفی که می‌خواهید به تمام این اصطلاح‌ها نسبت دهید درج کنید. در مثال زیر نمونه این حالت را مشاهده می‌کنید.

<dl>
  <dt>ویروس</dt>
  <dd>نوعی برنامه کامپیوتری که می‌تواند خود را کپی کند و معمولا اهداف شرورانه‌ای را دنبال می‌کند</dd>
  <dt>رایانامه</dt>
  <dt>پست الکترونیک</dt>
  <dd>روشی برای انتقال پیام میان افراد با استفاده از دستگاه های الکترونیکی و شبکه های رایانه ای است</dd>
</dl>

در مثال فوق برای واژه های رایانامه و پست الکترونیک، یک توصیف یا مفهوم بیان می‌شود. نتیجه این قطعه کد را در ادامه مشاهده می‌کنید.

بازگشت به فهرست مجموعه آموزشی HTML