کار با لیست ها در HTML قسمت سوم

• 1 تگ dl یا لیست توضیحی در HTML
  • 1.1 تگ‌های زیر‌مجموعه تگ dl
  • 1.2 نمونه کد لیست‌های توضیحی
  • 1.3 خاصیت‌های تگ dl

تگ dl یا لیست توضیحی در HTML

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

گاهی پیش می‌آید که می‌خواهیم علاوه بر ایجاد یک لیست بخواهیم برای هر بخش از لیستمان توضیحی بنویسیم در این مواقع از لیست توضیحی استفاده می‌کنیم.

در  HTML برای ساخت لیست‌های توضیحی از تگ <dl> استفاده می‌کنیم، dl مخفف کلمه Description List است که همان معنای لیست توضیحی را دارد.. این تگ از نظر تعریفی همانند تگ‌ <ul> و تگ <ol> برای نمایش آیتم‌های لیست و توضیحاتش به تگ‌های زیر‌مجموعه نیازمند است که در ادامه با آن‌ها آشنا می‌شویم.

تگ‌های زیر‌مجموعه تگ dl

همانطور که گفتم تگ <dl> برای نمایش آیتم‌ها و توضیحات دارای تگ‌های زیر مجموعه‌ای است که باید با آن‌ها آشنا شویم.

اولین تگ، تگ <dt> به معنای Definition Term می‌باشد و dt برای معرفی جمله اصلی یا در مثال بالا مواد لازم استفاده می‌شود، این تگ عملکرد مشابه تگ <li> دارد.

دومین تگ یک زیر مجموعه برای تگ <dt> هستش که برای ایتالیک نوشتن عناوین استفاده می‌شود. تگ <dfn> یک تگ توضیحی هستش که باعث کج شدن (ایتالیک شدن) متن می‌شود. البته شما می‌توانید خارج از <dt> نیز از <dfn> استفاده کنید.

سومین تگ که اختصاصی لیست‌های ترتیبی در  HTML می‌باشد، تگ <dd> مخفف Definition Description می‌باشد. توضیحات هر آیتم (Term) را با این تگ یعنی <dd> معرفی می‌کنیم.

حالا که به صورت کامل با تگ‌های سازنده یک لیست توضیحی آشنا شدیم، بهتر است که نمونه‌ای از کد لیست‌های توضیحی را نیز ببینیم.

نمونه کد لیست‌های توضیحی

یک نمونه از کد لیست‌های توضیحی را در زیر می‌بینید که دو عدد از خدمات فرازنتورک را به عنوان مثال توضیحی آورده‌ایم.

<dl>
<dt>SEO</dt>
<dd>Search Engine Optimization at faraznetwork</dd>
<dt>Webdesign</dt>
<dd>Coding which you want in short time at faraznetwork</dd>
</dl>

خاصیت‌های تگ dl

تگ dl و تمامی زیر مجموعه‌های آن از تمامی خاصیت‌های عمومی و رویدادی  HTML پشتیبانی می‌کنند ولی تا این لحظه هیچ خاصیت خاصی برای این تگ‌ها و این لیست ایجاد نشده است. البته شما می‌توانید برای ایجاد استایل‌دهی‌های خاص از  CSS استفاده کنید و این تگ‌ها را زیبا‌تر کنید.

برای مثال برای تغییر رنگ نوشته‌ها به قرمز می‌توانید از style="color:red" استفاده کنید (شما می‌توانید از رنگ‌های دیگه و از کد رنگ‌ها هم استفاده کنید که در دوره آموزش CSS با آن‌ها آشنا خواهید شد).

مثال از تگ dl در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

کار با لیست ها در HTML

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ dl در HTML پشتیبانی میکنند یا خیر.

در این مقاله با تگ dl برای ساخت لیست‌های توضیحی آشنا شدیم و متوجه شدیم که زیر مجموعه‌های آن هرکدام چه کاری را انجام می‌دهند.

نمونه‌هایی از لیست‌های توضیحی را بررسی کردیم و درنهایت متوجه شدیم که این تگ خاصیت خاصی برایش تعریف نشده است.

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

مطالب مرتبط:

1-کار با تصاویردرHTML  قسمت اول

2- کار با لیست ها در HTML قسمت اول

3-کار با لیست ها در HTML  قسمت دوم

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی