این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.
آموزش صفت Alt در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Alt در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Alt در HTML
صفت alt که خلاصه شده ی کلمه Alternative می باشد در لغت به معنی جایگزین می باشد, این یعنی یک متن جایگزین برای یک عنصر/تگ برای مشخص کردن هویت اون عنصر برای موتورهای جستجوگر.
شاید براتون سواله که دلیل اصلی استفاده از این صفت چیه و اینکه چرا باید از این صفت استفاده کنیم؟ بیشترین موارد استفاده از این صفت برای موتورهای جستجوگر و بعد برای استفاده کاربرانی است که نابینا هستند و یا با استفاده نرم افزارهای مخصوص صفحات وب را گوش میدهند.
ما انسان ها وقتی یک تصویر رو با چشامون میبینیم خب میتونیم درک کنیم و متوجه شیم که این تصویر چیه و در مورد چیه! ولی آیا موتورهای جستجوگر هم میتوانند مثله ما تصاویر رو ببینید و درک کنند؟!
آیا افراد نابینا هم میتوانند تصاویر رو با چشماشون ببینید؟ و متوجه شوند که مثلا این عکس در مورد چه موضوعی است؟
جواب خیر است , صفت ALT کارش همینه که بیاد و یک متنی رو به عنوان توضیح یا به عنوان هویت یک تصویر در موتورهای جستجوگر مثله (گوگل) مشخص کند.
تا هم موتورهای جستجوگر مثله گوگل و.. بتوانند متوجه شوند که اون عکس در مورد چه موضوعی است و هم افراد نابینایی که دارن از نرم افزارهای مخصوص استفاده مینمایند.
و موتورهای جستجوگر برای شناسایی و آنالیز تصاویر به چیزی که خیلی توجه میکنن همین صفت Alt می باشد, حتی خوده گوگل تاکید زیادی کرده که حتما از صفت alt در تصاویرتان استفاده نمایید.
پس بطور کلی صفت alt هست که به موتورهای جستجوگر میفهمونه که این عکس مثلا در مورد فلان ماشین است یا مثلا این عکس یا تصویر در مورد طبیعت هست یا دیگر موارد.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <input type=”image”> | <img> | <area> |
Free-Learn
مثال از صفت Alt در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : ( صفت alt در تگ area )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <img src="planets.jpg" alt="سیارات" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="خورشید" href="sun.html"> <area shape="circle" coords="90,58,3" alt="عطارد" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="زهره" href="venus.html"> </map> </body> |
مثال شماره ۲ : ( صفت alt در تگ img )
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" alt="دختر سوار بر اسب"> </body> |
مثال شماره ۳ : ( صفت alt در تگ input )
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/test.php"> نام شما: <input type="text" name="fname"><br><br> <input type="image" src="images/btn.png" alt="دکمه ارسال"> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت alt در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | IE |
| area | بله | بله | بله | بله | بله |
| img | بله | بله | بله | بله | بله |
| input | بله | بله | بله | بله | بله |
Free-Learn
نکات و توضیحات
سعی کنید همیشه از صفت alt در درون تگ IMG استفاده نمایید.(از نظر سئو مهم و ضروری است)
از صفت alt فقط میتوان در عنصر ورودی از نوع تصویر <“input type=”image> استفاده کرد.
