آموزش و یادگیری تگ abbr در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، ياد مي‌گيريم تگ <abbr> چيست و چگونه براي نمايش اختصارات (Abbreviations) در صفحات وب استفاده مي‌شود. اين تگ براي توضيح کامل يک واژه‌ي مخفف يا کوتاه‌شده به‌کار مي‌رود تا کاربر و موتورهاي جستجو بتوانند معني واقعي آن را درک کنند.

تگ abbr در HTML چيست؟

تگ <abbr> براي نمايش اختصارات و مخفف‌ها استفاده مي‌شود. اين تگ با افزودن ويژگي title، توضيح کامل يا معناي واژه را در اختيار کاربر قرار مي‌دهد. هنگامي که کاربر نشانگر ماوس را روي متن قرار دهد، توضيح آن به‌صورت يک پنجره کوچک (Tooltip) نمايش داده مي‌شود.

چرا از تگ abbr استفاده کنيم؟

• افزايش دسترسي‌پذيري (Accessibility) براي کاربراني که از صفحه‌خوان استفاده مي‌کنند.
• بهبود سئو (SEO) از طريق توضيح بهتر محتواي متني براي موتورهاي جستجو.
• ارائه تجربه کاربري بهتر با نمايش معني مخفف‌ها هنگام هاور.

مثال‌ها و کاربردهاي تگ abbr در HTML

1. نمايش يک مخفف ساده

در مثال زير، کلمه HTML با استفاده از تگ <abbr> تعريف شده است:

<p>زبان <abbr title="HyperText Markup Language">HTML</abbr> براي ساخت صفحات وب استفاده مي‌شود.</p>

با قرار دادن نشانگر ماوس روي واژه HTML، توضيح کامل آن يعني "HyperText Markup Language" نمايش داده مي‌شود.

2. مخفف در متن طولاني

مي‌توانيد از <abbr> براي توضيح اختصارات در مقالات علمي يا فني استفاده کنيد:

<p>سازمان <abbr title="World Health Organization">WHO</abbr> در سال 1948 تأسيس شد.</p>

در اين مثال، با هاور روي WHO، عبارت "World Health Organization" نمايش داده مي‌شود.

3. استفاده هم‌زمان با CSS

مي‌توانيد با استفاده از CSS براي تگ <abbr> استايل‌هاي خاصي اعمال کنيد تا ظاهر آن متمايز شود:

<style>
abbr {
  border-bottom: 1px dotted #2196f3;
  cursor: help;
}
</style>

<p>واژه <abbr title="Cascading Style Sheets">CSS</abbr> براي طراحي صفحات وب استفاده مي‌شود.</p>

در اين مثال، زير واژه CSS نقطه‌چين آبي نمايش داده مي‌شود تا نشان دهد اين يک مخفف است که مي‌توان روي آن هاور کرد.

4. مثال کاربردي در متن واقعي

<p>شرکت <abbr title="International Business Machines">IBM</abbr> يکي از قديمي‌ترين برندهاي دنياي فناوري است.</p>

در اينجا نيز توضيح کامل برند IBM هنگام هاور نمايش داده مي‌شود.

صفات مهم تگ abbr

نکات و توصيه‌ها در استفاده از abbr

• هميشه از ويژگي title براي مشخص کردن توضيح کامل استفاده کنيد.
• در محتواي علمي، فني و داکيومنت‌هاي آموزشي، اين تگ به درک بهتر کاربران کمک زيادي مي‌کند.
• براي جلوگيري از خطا در سئو، از پر کردن غيرمنطقي ويژگي title بپرهيزيد.

استايل پيشنهادي براي تگ abbr

abbr {
  text-decoration: underline dotted;
  cursor: help;
}

نکته: در برخي مرورگرها، استايل پيش‌فرض abbr ممکن است متفاوت باشد. بهتر است با CSS ظاهر آن را کنترل کنيد تا تجربه کاربري يکساني در همه مرورگرها داشته باشيد.

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

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