تگ abbr در HTML

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

فهرست مطالب

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

مخفف، همان طور که می دانید کلمه ها را به صورت کوتاه شده و مختصر نمایش می دهد.

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

به عنوان مثال WWW که زیاد در فضای مجازی دیده اید مخفف جمله World Wide Web می باشد. یا همین پروتکل https که در ابتدای آدرس سایت در مرورگر نوشته شده، مخفف Hypertext Transfer Protocol Secure است.

تگ abbr چیست؟

تگ abbr اشاره به کلمه abbreviation دارد و ترجمه آن به زبان فارسی مخفف می شود و همان طور که مشخص است با استفاده از این تگ می توان مخفف ها را در نوشته ها نمایش داد.

این تگ با <abbr> باز شده و با </abbr> بسته می شود و هرچه بین آن قرار گیرد به عنوان مخفف شناخته می شود.

کد:

<abbr>WWW</abbr>

تمرین: جمله HTML is the markup language را در تگ پاراگراف یا p قرار داده و کلمه HTML را به عنوان مخفف در تگ abbr قرار دهید.

کد:

<p><abbr>HTML</abbr> is the standard markup language</p>

اجرا

صفت title یا عنوان در تگ abbr

با استفاده از صفت title یا عنوان، می توان در صورت آوردن اشاره گر ماوس روی تگ abbr جمله کامل مخفف را به صورت کادر کوچکی در کنار تگ نمایش داد.

کد:

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language</p>

اجرا

در مثال بالا در تگ p یا پاراگراف جمله ای نوشته شده و کلمه HTML به عنوان مخفف در تگ abbr قرار داده شده است و در صفت عنوان یا title این تگ جمله HyperText Markup Language نوشته شده است. در صورتی که کاربر، اشاره گر ماوس را روی این تگ قرار دهد جمله کامل مخفف به عنوان راهنما نمایش داده می شود.

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ abbr در اکثر مرورگرها به صورت زیر است:

کد CSS:

abbr {
  display: inline;
}

در اغلب مرورگرها معمولا این تگ با خط زیر به صورت نقطه چین نمایش داده می شود که می توانید با استفاده از CSS استایل مورد نظر خود را پیاده سازی کنید.

سازگاری با مرورگرها

تگ abbr با مرورگرهای زیر سازگار است:

  • گوگل کروم
  • فایرفاکس
  • اج
  • اپرا
  • سافاری
  • گوگل کروم اندروید
  • فایرفاکس اندروید
  • اپرا اندروید
  • سافاری iOS

معرفی مطالب در این زمینه