تگ abbr در HTML

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

ساختار پایه تگ <abbr>

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

HTML

<abbr title="معنی کامل کلمه مخفف">کلمه مخفف</abbr>

در این ساختار:

• title: معنی کامل کلمه مخفف را مشخص می‌کند. این متن زمانی که کاربر نشانگر ماوس را بر روی کلمه مخفف نگه می‌دارد، به عنوان نکته نمایش داده می‌شود.
• کلمه مخفف: کلمه‌ای است که می‌خواهید به عنوان مخفف نمایش داده شود.

مثال:

HTML

<abbr title="HyperText Markup Language">HTML</abbr>

در این مثال، “HTML” به عنوان مخفف “HyperText Markup Language” نمایش داده می‌شود. زمانی که کاربر نشانگر ماوس را بر روی “HTML” نگه می‌دارد، متن “HyperText Markup Language” به عنوان نکته نمایش داده می‌شود.

نکات:

• می‌توانید از تگ <abbr> در داخل تگ‌های دیگر HTML مانند <p>, <strong> و <em> استفاده کنید.
• می‌توانید از CSS برای stylize کردن ظاهر تگ <abbr>، مانند رنگ، فونت و حاشیه استفاده کنید. آموزش کامل CSS در سایت آکادمی دویکس به صورت رایگان قرار دارد و شما می‌توانید مقالات این دسته را مطالعه کنید.
• استفاده از تگ <abbr> به طور کلی برای سئو (بهینه‌سازی موتور جستجو) مفید است. موتورهای جستجو می‌توانند از معنی کامل کلمات مخفف برای درک بهتر محتوای صفحه شما استفاده کنند.

موارد استفاده از تگ <abbr>

• نمایش مخفف واحدهای اندازه‌گیری مانند “kg” برای کیلوگرم یا “cm” برای سانتی‌متر.
• نمایش مخفف عناوین شغلی مانند “CEO” برای مدیر عامل یا “CFO” برای مدیر مالی.
• نمایش مخفف اصطلاحات تخصصی مانند “ASAP” برای “به محض امکان” یا “FYI” برای “برای اطلاع شما”.

تفاوت تگ <abbr> و تگ <acronym>

تگ <acronym> نیز برای نمایش کلمات مخفف در HTML استفاده می‌شود. با این حال، این تگ در HTML5 منسوخ شده است و به جای آن باید از تگ <abbr> استفاده کنید. تگ <abbr> و <acronym> هر دو برای نمایش کلمات مخفف در صفحات وب استفاده می‌شوند، اما تفاوت‌های کلیدی بین آنها وجود دارد. تفاوت اصلی بین این دو تگ در نحوه نمایش معنی کامل کلمه مخفف است. در تگ <abbr>، معنی کامل کلمه مخفف به عنوان نکته نمایش داده می‌شود، در حالی که در تگ <acronym>، معنی کامل کلمه مخفف به صورت پرانتز بعد از کلمه مخفف نمایش داده می‌شود.

تفاوت‌های کلیدی بین تگ <abbr> و تگ <acronym>

1. نحوه نمایش معنی کامل:

• <abbr>: معنی کامل کلمه مخفف به عنوان نکته نمایش داده می‌شود زمانی که کاربر نشانگر ماوس را بر روی کلمه مخفف نگه می‌دارد.
• <acronym>: معنی کامل کلمه مخفف به صورت پرانتز بعد از کلمه مخفف نمایش داده می‌شد. توجه: این تگ در HTML5 منسوخ شده است.

2. کاربرد:

• <abbr>: برای مخفف‌هایی که معنی آنها به طور واضح مشخص نیست و ممکن است برای خوانندگان ناآشنا باشد، مناسب است.
• <acronym>: (منسوخ شده) برای مخفف‌هایی که معنی آنها به طور کلی شناخته شده است، مانند “NASA” (آژانس فضایی ملی ایالات متحده آمریکا) یا “ATM” (دستگاه خودپرداز) مناسب بود.

3. پشتیبانی:

• <abbr>: توسط تمام مرورگرهای مدرن پشتیبانی می‌شود.
• <acronym>: (منسوخ شده) توسط مرورگرهای مدرن پشتیبانی می‌شود، اما استفاده از آن به دلیل نحوه نمایش معنی کامل (پرانتز) و احتمال سردرگمی کاربران، توصیه نمی‌شود.

4. سئو:

• <abbr>: به طور کلی برای سئو (بهینه‌سازی موتور جستجو) مفید است. موتورهای جستجو می‌توانند از معنی کامل کلمات مخفف برای درک بهتر محتوای صفحه شما استفاده کنند.
• <acronym>: (منسوخ شده) ممکن است برای سئو مفید نباشد، زیرا موتورهای جستجو ممکن است به درستی معنی کامل کلمات مخفف را که در پرانتز نمایش داده می‌شوند، درک نکنند.

در حال حاضر، استفاده از تگ <abbr> به جای تگ <acronym> به دلیل مزایای زیر توصیه می‌شود:

• خوانایی بهتر: نمایش معنی کامل به عنوان نکته، خوانایی متن را برای کاربران افزایش می‌دهد.
• عدم سردرگمی: نمایش معنی کامل در نکته، احتمال سردرگمی کاربران را کاهش می‌دهد.
• سازگاری با سئو: تگ <abbr> به طور کلی برای سئو مفیدتر است.

بنابراین، اگر قصد دارید کلمه‌ای را به صورت مخفف در صفحه وب خود نمایش دهید، از تگ <abbr> به جای تگ <acronym> استفاده کنید.