The alt attribute specifies alternative text for an image.
This text only displays when the image cannot be loaded.
Elements that accept this attribute are <img>, <area>, and <input>.
An <img> with an alt attribute.
The alternative text is not visible because the image displays without errors.
<img src="/img/html/poppies.jpg"
alt="Van Gogh Poppies">
In this example the image name has a typo and cannot be loaded.
The alt text displays, next to a broken image icon.
<img src="/img/html/pppies.jpg"
alt="Van Gogh Poppies">
For additional details see our HTML img alt Reference.
The alt text only displays when the image is not found, or cannot be loaded.
The alt attribute is only meaningful on image elements (see below).
Alternative text is also used by screen readers, and SEO to describe the image.
Tip: Always add an alt attribute to your images.
<tagname alt="text" >
| Value | Description |
|---|---|
| text | Alternative text for an image that cannot be loaded. |
The following image-related elements accept the alt attribute.
| Elements | Description | |
|---|---|---|
| <img> | Creates an image -- see above for example | |
| <area> | Specifies a map area for an image | |
| <input> | Creates input controls, such as a submit button of an image |
An alt attribute on 3 <area> elements.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area alt="Monitor" shape="rect" coords="253,142,16,2"
href="href="javascript:alert('Monitor was clicked')">
<area alt="Keyboard" shape="rect" coords="262,218,0,156"
href="javascript:alert('Keyboard was clicked')">
<area alt="Mouse" shape="circle" coords="267,234,22"
href="javascript:alert('Mouse was clicked')">
</map>
For additional details see our HTML area alt Reference.
An alt attribute on an <input> tag of type image (the circular button).
<form action="/tutorial/action.html">
<label for="firstname">First name</label><br />
<input type="text" id="firstname" name="firstname"><br />
<label for="lastname">Last name</label><br />
<input type="text" id="lastname" name="lastname"><br /><br />
<input type="image" alt="Submit" width="40" height="40"
src="/img/html/arrow.png">
</form>
For additional details see our HTML input alt Reference.
Here is when alt support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
