HTML alt attribute: This attribute will help us to provide the alternative of the image because if the user faces any issues regarding loading, error or some other issue for the image and cannot view the image.
HTML alt attribute
And this attribute is required for <img> element. While the alt attribute can be applied to <area>, <input>, <img> elements. The alt attribute is required for the <img> element.
Note:
For <input> elements, the alt attribute can only be used with <input type=”image”>.
To create a tooltip for an image, use the title attribute!
Supported Browsers
This attribute can be supported by different browsers as follows. They are
- Internet Explorer
- Opera
- Safari
- Firefox
Example:
<!DOCTYPE html> <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
Output:
Example: for <img> element
<!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
Output:
Example:
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> First name: <input type="text" name="fname"><br> <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> </form> <p>Click on the image, and the input will be sent to a page on the server called "/action_page.php".</p> <p><b>Note:</b> The image input type sends the X and Y coordinates of the click that activated the image button as default.</p> </body> </html>
Output:
