|
Definition and UsageThe 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 toThe alt attribute can be used on the following elements:
|
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:
| html alt |
| How to add An image map with clickable areas in HTML | HTML Attribute |
| How to add An image with an alternate text specified | HTML Attribute |
| How to add An HTML form with an image that represents the submit button | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded by: | Admin |
Views: | 89 |
Reffered: https://www.w3schools.com/tags/att_alt.asp