این آموزش در تاریخ ۱۴۰۲/۰۶/۲۰ آپدیت شده است.
آموزش صفت Alt در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Alt در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Alt در HTML
صفت alt که خلاصه شده ی کلمه Alternative می باشد در لغت به معنی جایگزین می باشد، این یعنی یک متن جایگزین برای یک تصویر برای مشخص کردن هویت اون عکس / تصویر برای موتورهای جستجوگر.
شاید براتون سواله که دلیل اصلی استفاده از این صفت چیه و اینکه چرا باید از این صفت استفاده کنیم؟ اصلی ترین و مهمترین دلیل استفاده از این صفت برای موتورهای جستجوگر برای بحث سئو و بعد برای استفاده کاربرانی است که نابینا هستند و یا با استفاده نرم افزارهای مخصوص صفحات وب را گوش میدهند.
موتورهای جستجوگر مثه گوگل، وقتی بخوان به تصاویر داخل سایت ها دسترسی پیدا کنند از صفت 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="files/planets.jpg" alt="سیارات" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="خورشید" href="files/sun.html"> <area shape="circle" coords="90,58,3" alt="عطارد" href="files/mercury.html"> <area shape="circle" coords="124,58,8" alt="زهره" href="files/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/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="image" src="files/submit-button.png" alt="دکمه ارسال"> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت alt در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| area | بله | بله | بله | بله | بله |
| img | بله | بله | بله | بله | بله |
| input | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 |
<img alt="Text"> <area alt="Text"> <input alt="Text"> |
Free-Learn
جدول مقادیر صفت Alt در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Text | یک متن یا توضیح کوتاه |
Free-Learn
نکات و توضیحات
- سعی کنید همیشه از صفت
altدر درون تگ IMG استفاده نمایید. ( از نظر سئو بسیار مهم و ضروری می باشد ) - از صفت
altفقط میتوان در اینپوت های از نوع تصویر <“input type=”image> استفاده کرد.
