RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-alt-attribute/ below:

HTML alt attribute - GeeksforGeeks

HTML alt attribute

Last Updated : 12 Jul, 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4