آموزش و يادگيري تگ dl در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <dl> آشنا مي‌شويم. اين تگ براي ايجاد ليست تعريف‌ها (Description List) استفاده مي‌شود و معمولاً همراه با تگ‌هاي <dt> و <dd> کاربرد دارد.

تگ dl در HTML چيست؟

تگ <dl> مجموعه‌اي از اصطلاحات و تعاريف را گروه‌بندي مي‌کند. هر اصطلاح با تگ <dt> مشخص شده و تعريف آن با تگ <dd> ارائه مي‌شود. اين نوع ليست براي نمايش واژه‌نامه‌ها، اصطلاحات فني، سوالات متداول و مشخصات محصول بسيار مناسب است.

مثال ساده از تگ dl

<dl>
  <dt>HTML</dt>
  <dd>زبان استاندارد براي طراحي صفحات وب.</dd>

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

  <dt>JavaScript</dt>
  <dd>زبان برنامه‌نويسي براي ايجاد تعامل در صفحات وب.</dd>
</dl>

در اين مثال، هر اصطلاح با تعريف مربوط به خود نمايش داده شده است.

ويژگي‌هاي مهم تگ dl

ويژگي	توضيح
class	براي اعمال استايل CSS به کل ليست
id	شناسه يکتا براي ارجاع يا استايل‌دهي

مثال با استايل CSS

<style>
  dl {
    background-color: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
  }
  dt {
    font-weight: bold;
    margin-top: 8px;
  }
  dd {
    margin-left: 20px;
    margin-bottom: 8px;
  }
</style>

<dl>
  <dt>CPU</dt>
  <dd>پردازنده مرکزي سيستم.</dd>
  
  <dt>RAM</dt>
  <dd>حافظه موقت براي پردازش داده‌ها.</dd>
</dl>