لیست‌های توضیحات/تعاریف

لیست‌های توضیحات (

,

,

): واژه‌نامه وب شما! 📚

سلام به دوستان عزیز! تا اینجا با لیست‌های نامرتب (ul) و مرتب (ol) آشنا شدیم که برای نمایش فهرستی از آیتم‌ها عالی هستن. اما گاهی اوقات، ما یه لیست از اصطلاحات یا مفاهیم داریم و می‌خوایم برای هر کدوم یه تعریف یا توضیح ارائه بدیم. دقیقاً مثل یه واژه‌نامه!

لیست‌های توضیحات (Definition Lists) بهترین دوست شما برای ساختن بخش‌های FAQ، واژه‌نامه‌ها، یا حتی نمایش مشخصات محصولات هستن.

تگ <dl>: کلکسیون تعاریف 📦

تگ <dl> مخفف Description List (لیست توضیحات) هست. این تگ مثل یه گالری یا کانتینر، مجموعه‌ای از جفت‌های “موضوع-توضیح” رو در خودش نگه می‌داره.

ساختار کلی:

<dl>
  <!-- جفت‌های موضوع و توضیح اینجا قرار می‌گیرند -->
</dl>

تگ <dt>: موضوع اصلی! 📌

تگ <dt> مخفف Description Term (اصطلاح توضیحات) هست. هر <dt>، یک “موضوع” یا “واژه” رو مشخص می‌کنه که می‌خوایم براش تعریف ارائه بدیم. این واژه معمولاً بولد (پررنگ) نمایش داده می‌شه.

تگ <dd>: توضیح کامل! 📝

تگ <dd> مخفف Description Details (جزئیات توضیحات) هست. این تگ، “توضیح” یا “تعریف” مربوط به <dt> قبلی رو در بر می‌گیره. مرورگرها معمولاً متن داخل <dd> رو با کمی تورفتگی (indentation) نمایش می‌دن.

نکته مهم: هر <dt> باید با یک یا چند <dd> همراه باشه و بالعکس. این تگ‌ها همیشه در کنار هم معنا پیدا می‌کنن.

مثال: ساخت یک واژه‌نامه ساده 🤓

<h2>واژگان مهم HTML:</h2>
<dl>
  <dt>HTML</dt>
  <dd>مخفف HyperText Markup Language است. زبان اصلی استاندارد برای ساخت صفحات وب.</dd>

  <dt>CSS</dt>
  <dd>مخفف Cascading Style Sheets است. برای طراحی و ظاهر صفحات وب استفاده می‌شود.</dd>

  <dt>تگ</dt>
  <dd>یک عنصر نشانه‌گذاری در HTML که با &lt; و &gt; احاطه شده و معنایی به صفحه می‌دهد.</dd>
  <dd>مثال: &lt;p&gt; پاراگراف &lt;/p&gt;</dd> <!-- می‌تونیم چند تا dd داشته باشیم -->
</dl>

نتیجه این کد به شکل زیر نمایش داده می‌شه:

HTML

مخفف HyperText Markup Language است. زبان اصلی استاندارد برای ساخت صفحات وب.

CSS

مخفف Cascading Style Sheets است. برای طراحی و ظاهر صفحات وب استفاده می‌شود.

تگ

یک عنصر نشانه‌گذاری در HTML که با < و > احاطه شده و معنایی به صفحه می‌دهد.

مثال: <p> پاراگراف </p>

کاربردهای دیگر لیست توضیحات:

• سوالات متداول (FAQ): سوال در <dt> و جواب در <dd>.
• مشخصات فنی: نام ویژگی (مثلاً “رنگ”) در <dt> و مقدار آن (مثلاً “قرمز”) در <dd>.
• اطلاعات تماس: نوع اطلاعات (مثلاً “تلفن”) در <dt> و خود شماره در <dd>.

هرچند مرورگرها به طور پیش‌فرض ظاهر ساده‌ای به این لیست‌ها می‌دن، اما با CSS می‌تونید ظاهر اون‌ها رو کاملاً شخصی‌سازی کنید و اون‌ها رو به بخش‌های جذاب و کاربردی در طراحی‌تون تبدیل کنید.

لیست‌های توضیحات با <dl>, <dt>, و <dd> ابزاری فوق‌العاده برای ارائه اطلاعات تعریفی و ارتباط بین مفاهیم هستن. با استفاده از این تگ‌ها، می‌تونید ساختار واضح و مرتبی به محتواهای توضیحی در وب‌سایتتون بدید. 😊