HTML alt Attribute - HTML Attribute - Horje

Definition and Usage

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Note: The alt attribute is required for the <img> element.

Note: For <input> elements, the alt attribute can only be used with <input type="image">.

Tip: To create a tooltip for an image, use the title attribute!

Applies to

The alt attribute can be used on the following elements:

Elements	Attribute
<area>	alt
<img>	alt
<input>	alt

How to add An image map with clickable areas in HTML

Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="https://horje.com/avatar.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Output should be:

How to add An image with an alternate text specified

The img element.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The img element</h1>

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

</body>
</html>

Output should be:

How to add An HTML form with an image that represents the submit button

Note: The image input type sends the X and Y coordinates of the click that activated the image button as default.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The input alt attribute</h1>

<p>Click on the image, and the input will be sent to a page on the server called "/action_page.php".</p>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <input type="image" src="https://horje.com/avatar.png" alt="Submit" width="48" height="48">
</form>

<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 should be:

Browser Support

The alt attribute has the following browser support for each element.

index.html

Output should be:

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference