تگ 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 نظر

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

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

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