HTML alt attribute

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

  • Google
  • 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:

HTML alt attribute

Example: for <img> element

<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>

Output:

HTML alt attribute img element

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:

HTML alt attribute