HTML alt attribute

Last Updated : 03 Feb, 2025

The alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.

Syntax:

<img src=" " alt=" " >

HTML

<html>
  <body>
    <h1>GeeksforGeeks Logo</h1>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
         alt="GeeksforGeeks Logo">
  </body>
</html>

The alt attribute in the <img> tag provides descriptive text ("GeeksforGeeks Logo") that displays if the image fails to load, enhancing accessibility.

Supported tags:

Name	Description
area	<area>'s alt provides alternative text for image map areas.
image	<img> alt offers alternative text for image accessibility.
input	specify the alternative text for an image when the image attribute is not displayed.
<applet>	used to specify the alternate text for an applet element.

Attribute Values:

value	Description
text	is used to specify the alternative text for the supported element if the image is not displaying.

More Example of HTML alt attribute

Image Input with alt Attribute

HTML

<html>
<body>
	<form action="/submit" method="post">
		<label for="username">Username:</label>
		<input type="text" id="username" name="username"><br><br>
		<input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" alt="Submit"
               width="48" height="48">
	</form>
</body>
</html>

In this Example:

The <input type="image"> element creates a submit button with an image.
The alt attribute provides alternative text ("Submit") for the image button, ensuring functionality and accessibility if the image fails to load.

Image Map with alt Attributes

HTML

<html>
<body>
	<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         alt="Geometric Shapes"
		width="300" height="119" usemap="#shapemap">
	<map name="shapemap">
		<area shape="poly" coords="59,31,28,83,91,83" href="#triangle" alt="Triangle">
		<area shape="circle" coords="155,56,26" href="#circle" alt="Circle">
		<area shape="rect" coords="224,30,276,82" href="#square" alt="Square">
	</map>
</body>
</html>

In this example:

The <img> tag displays an image of geometric shapes and uses the usemap attribute to define an image map.
Each <area> tag within the <map> element defines a clickable region with a corresponding alt attribute, providing descriptive text for each shape.

Best Practices for HTML alt Attribute

Be Descriptive and Concise: Provide clear, brief descriptions that convey the image's content or function, aiding users and search engines in understanding its relevance.
Avoid Redundancy: Refrain from using phrases like "image of" or "picture of," as screen readers already announce the presence of an image.
Use Empty alt for Decorative Images: For images that don't convey meaningful information, set alt="" to allow screen readers to skip them, enhancing accessibility.

HTML async Attribute

Vijay Sirra

Improve

Article Tags :

HTML alt attribute

Image Input with alt Attribute

Image Map with alt Attributes

Best Practices for HTML alt Attribute

Similar Reads

Thank You!

What kind of Experience do you want to share?