تگ dl در HTML

تگ dl در HTML

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

تگ 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 Mizfa</dd>
<dt>Webdesign</dt>
<dd>Coding which you want in short time at Mizfa</dd>
</dl>
نمونه کد لیست توضیحی
نمونه کد لیست توضیحی

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

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

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

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

9 نظر

9 پاسخ

    1. علی اکبر پاسخی برامون نیومده، ببین مجدد میتونی ارسال کنی؟

  1. سلام. ببخشید باز هم دقیقا متوجه کاربرد تگ dl نمی‌شم! تا حالا هم ندیدم توی هیچ سایتی استفاده بشه. دقیقا یه طراح سایت، چه موقع ازش استفاده می‌کنه؟

    1. سلام محمد باقر، این تگ به طور کلی برای ساخت لیست هایی هست که هرکدوم از اجزاء نیازمند توضیح هستند.
      مثلا یک لیست داریم به این صورت که میخوایم داخلش اجزاء SEO یا همون سئو رو معرفی کنیم. داخل این لیست سئو داخلی و سئو خارجی هستند.
      پس لیستمون اینطوری میشه که:

      ۱ – سئو داخلی
      ۲ – سئو خارجی

      حالا اگر بخوایم تعریف این دوتا رو بنویسیم میتونیم جلوشون بنویسیم یا میتونیم با استفاده از تگ dl و زیر مجموعه هاش توضیحش رو در زیرش بنویسیم که این شکلی بشه :
      ۱ – سئو داخلی
      به مجموعه عملکرد های تخصصی مثل کار های فنی و تولید محتوا میگن
      ۲ – سئو خارجی
      به مجموعه فعالیت هایی که خارج از محیط وب سایت انجام میشه مثل ساخت بک لینک و تبلیغات

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

        1. سلام محمد باقر عزیز،
          من یکی از هزاران کاربران و البته طرفدار وبسایت میزفا هستم
          گفتی که تاحالا ندیدم ازش استفاده بشه
          کافیه ی سرچ کنی و چندتا سر و چندتا نگاه بندازی به سایت های تغذیه
          این درمورد مورد اول بود
          بار اول خوندم متوجه شدم انقدر واضح توضیح داده شده

          درمورد مورد دومی هم که استاد خودش توضیح داد
          من دیگه کی باشم (:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=