آموزش طراحی سایتآموزش HTML

تگ dfn در HTML

تگ مفهومی dfn که از عبارت HTML Definition element میاد رو قصد داریم در این مقاله به شکل بسیار کامل و با مثال درباره تگ dfn که قبل از html5 هم وجود داشت بپردازیم. در ادامه آموزش HTML در میزفا همراه باشید.

تگ dfn در HTML5

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

معرفی تگ dfn

تگ <dfn> یک تگ تعریفی است و زمانی که بخواهیم یک عبارت تعریفی در صفحه داشته باشیم از این تگ استفاده می‌کنیم. بعضی از مرورگرها متنی که در داخل این تگ قرار می‌گیرد را به صورت italic نمایش می‌دهند. البته شما می‌توانید با CSS استایل دلخواهی را برای این تگ تعریف کنید.

جهت درک بهتر کاربرد تگ dfn در طراحی سایت به مثال زیر توجه کنید:

<p>
    <dfn>HTML</dfn> is the standard markup language for creating web pages.
</p>

این مثال را در یک ادیتور مانند notepad و یا ++notepad کپی کرده و آن را با پسوند htm و یا html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، میتوانید نتیجه کد بالا را در مروگر مشاهده کنید. نتیجه کد به صورت زیر خواهید بود:

نتیجه کد بالا - تگ dfn
نتیجه کد بالا – تگ dfn

صفت های تگ dfn

  • صفت title
    تگ dfn دارای صفت title است، در صورتی که از صفت title برای تگ dfn استفاده کنید هنگامی که کاربر کلیک موس خود را بر روی متن درون تگ dfn میبرد مقدار تعریف شده در تگ title به او نمایش داده می‌شود. به مثال زیر توجه کنید :
 <p>
    <dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.
</p>

تفاوت تگ abbr و dfn

تگ dfn یک تگ تعریفیست اما تگ abbr برای مخفف سازی استفاده می‌شود. اگر بخواهیم مخفف کلمه Search Engine Optimization را بنویسیم که SEO است را بنویسیم و هنگامی که کاربر روی آن نگاه می‌دارد معادل کامل SEO نمایش داده شود، از تگ abbr استفاده می‌کنیم. حال اگر بخواهیم در یک پاراگراف SEO را تعریف کنیم از تگ dfn استفاده می‌کنیم و قبل و بعد از عبارت SEO می‌توانیم و تگ dfn تعریفی در رابطه سئو داشته باشیم.

نمونه‌ای از این تفاوت را می‌‌توانید در بخش مثال‌های این مقاله آموزشی بخوانید.

استفاده از تگ dfn در لیست‌های توضیحی

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

اگر می‌خواهید خیلی سریع در رابطه با لیست‌ها و لیست‌های توضیحی اطلاعات کسب کنید، می‌توانید مقالات میزفا در رابطه با آشنایی با لیست‌ها و آشنایی با تگ dl (لیست‌های توضیحی) را بخوانید، در غیر این‌صورت جلسه به جلسه که جلو بروید به این مقالات نیز خواهیم رسید.

مثال‌های کاربردی تگ dfn

حالا که با تگ <dfn> به خوبی آشنا شدیم، بهتر است که کمی مثال‌های گسترده‌ای در رابطه با این تگ با همدیگر بررسی کنیم.

مثال استاندارد استفاده از تگ dfn

مثال زیر یک نمونه استاندارد از استفاده تگ dfn می‌باشد. برای مشاهده بهتر در نمونه بخش تگ dfn‌ را به صورت توپر مشخص کردیم.

 

 
<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>

<p>Mizfa Technical Seo and WebDesign Agancy </p>
<p>Mizfa Technical Seo and WebDesign Agancy </p>
<p>Mizfa Technical Seo and WebDesign Agancy </p>
<p>Mizfa Technical Seo and WebDesign Agancy </p>

نمونه استاندارد کد dfn
نمونه استاندارد کد dfn

مثال استفاده از abbr در کنار dfn

 

36873

نمونه لیست توضیحی با استفاده از dfn

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

<h4>Mizfa</h4>
<dl>
<dt><dfn>Definition List</dfn></dt>
<dd>A list of terms and their definitions/descriptions.</dd>
<dt><dfn>Ordered List</dfn></dt>
<dd>A numbered list.</dd>
<dt><dfn>Unordered List</dfn></dt>
<dd>An unnumbered list.</dd>
</dl>
استفاده از dfn در لیست توضیحی
استفاده از dfn در لیست توضیحی

نکات تکمیلی تگ dfn

  • تگ dfn معمولا درون تگ p ، تگ section یا فهرست توصیفی ( معمولا dt یا dd ) قرار می‌گیرد .
  • تگ dfn یک عنصر درون خطی یا inline block است.
  • این تگ توسط تمامی مرورگرها پشتیبانی می‌شود.

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

علی اسمعیلی

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

نوشته های مشابه

‫12 نظرها

  1. سلام مجدد آقا پوریا…زنده باشید…براتون آرزوی موفقیت دارم. در پناه حق

  2. سلام و خدا قوت…ممنون بخاطر آموزشهای خوبتون… ببخشید میخواستم فرق بین تگ dd و dfn رو بدونم آخه هر دو برای تعریف بکار میرن!! میخواستم بدونم هر کدوم چه زمانی بکار میرن؟ بعدش ما وقتی صفت titleرو توی این تگ بکار میبریم تغییری بوجود نمیاد !!! اصلا صفت title چه موقع کاربرد داره؟ سوال بعدی این که قسمت سرمه ای رنگ پایین صفحه ، تا آخر یعنی تا پایین صفحه ، همه footer بحساب میان؟.‌. ممنونم

    1. سلام متین. گاهی هر دو رو با هم استفاده میکنن. تگ dd جزئیات بیشتری داره با این حال بستگی به پروژه داره.
      فوتر میشه پایین هر المان. یک مقاله میتونه فوتر داشته باشه. یک بخش خاصی میتونه فوتر داشته باشه و همینطور کل صفحه هم میتونه فوتر داشته باشه.
      صفت title بیشتر جنبه کاربری داره و مثلا وقتی کاربر موس رو هاور کرد یک دستور بهش داده بشه مثلا “کلیک کن اینجا”. این میتونه یک title باشه و یا توضیحات بیشتر تو title بدی. یک کوچولو هم تو سئو اثر داره.

      1. سلام آقا پوریا…ممنون از پاسخ خوبتون…دستتون درد نکنه خیلی لطف کردید

        1. سلام متین جان. خواهش میکنم. سوالی داشتی بازم حتما بپرس.

          1. سلام آقا پوریا…ممنونم محبت دارید…چشم اگه سوالی داشتم حتما مزاحمتون میشم…من تازه آموزش html5 رو شروع کردم و فعلا دارم تگ ها رو یاد میگیرم.. مطالب شما هم خیلی خیلی به من کمک کرد … واقعا دستتون درد نکنه… مطمئنم بازم به مشکل برمیخورم اونوقت حتما زحمتتون میدم…زنده باشید

          2. سلام متین جان. خواهش میکنم. خوشحالم براتون مفید بوده.

    1. سلام. تگ dfn برای تعریف هست ولی تگ abbr برای نشون دادن مخفف یک عبارت است مثلا من میخوام SEO تعریف کنم.

      SEO

      میتونم قبل و بعد از dfn توضیحات بیشتری درباره سئو بدم.

  3. سلام . روزتون بخیر
    اطلاعات من از کد نویسی تقریباً در حد صفر هست و متاسفانه فرصت کافی هم ندارم تا یاد بگیرم اما یه سئوال دارم در مورد امکانی که تو اکثر صفحات این سایت هست اینه که سرفصل ها بصورت لینک هستند و بعد از کلیک رو لینک مورد نظر اسکرول خودش پایین میره

    سئوالم این هست که من هم میتونم این کد رو تو صفحات سایت خودم ایجاد کنم ؟
    ممنون میشم راهنمایی کنید یا اگر مقاله ای در مورد این نوع تگ هست معرفی کنید

    1. سلام، روز شما هم بخیر. کدنویسی شده و متاسفانه مقاله ای در این زمینه نمیشناسم.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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