تگ 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 صحبت میکنیم.
اگر نظر، سوال یا پیشنهادی در رابطه با لیستهای توضیحی داشتید، خیلی خوشحال میشویم که پذیرای آنها در بخش پاسخهای میزفا باشیم.
9 پاسخ
جواب
علی اکبر پاسخی برامون نیومده، ببین مجدد میتونی ارسال کنی؟
پاسخ سوال :
سلام محمد، ممنون درست نوشتی.
سلام. ببخشید باز هم دقیقا متوجه کاربرد تگ dl نمیشم! تا حالا هم ندیدم توی هیچ سایتی استفاده بشه. دقیقا یه طراح سایت، چه موقع ازش استفاده میکنه؟
سلام محمد باقر، این تگ به طور کلی برای ساخت لیست هایی هست که هرکدوم از اجزاء نیازمند توضیح هستند.
مثلا یک لیست داریم به این صورت که میخوایم داخلش اجزاء SEO یا همون سئو رو معرفی کنیم. داخل این لیست سئو داخلی و سئو خارجی هستند.
پس لیستمون اینطوری میشه که:
۱ – سئو داخلی
۲ – سئو خارجی
حالا اگر بخوایم تعریف این دوتا رو بنویسیم میتونیم جلوشون بنویسیم یا میتونیم با استفاده از تگ dl و زیر مجموعه هاش توضیحش رو در زیرش بنویسیم که این شکلی بشه :
۱ – سئو داخلی
به مجموعه عملکرد های تخصصی مثل کار های فنی و تولید محتوا میگن
۲ – سئو خارجی
به مجموعه فعالیت هایی که خارج از محیط وب سایت انجام میشه مثل ساخت بک لینک و تبلیغات
حالا تعریف های من خیلی خلاصه بود و ممکنه اشتباه باشه ولی کلا برای توضیح این تگ داشتم میگفتم.
امیدوارم الان دیگه متوجه شده باشی.
بله ممنونم
سلام محمد باقر عزیز،
من یکی از هزاران کاربران و البته طرفدار وبسایت میزفا هستم
گفتی که تاحالا ندیدم ازش استفاده بشه
کافیه ی سرچ کنی و چندتا سر و چندتا نگاه بندازی به سایت های تغذیه
این درمورد مورد اول بود
بار اول خوندم متوجه شدم انقدر واضح توضیح داده شده
درمورد مورد دومی هم که استاد خودش توضیح داد
من دیگه کی باشم (:
خیلی متشکرم