HTML alt Attribute


The alt attribute on an image element specifies alternative text for the image. The text will only display when the image cannot be loaded. Elements that accept this attribute include <img>, <area>, and <input>.

Example

#

An alt attribute on an <img> element.
The alternative text is not visible because the image loads and displays without errors.

Van Gogh Poppies
<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.

Van Gogh Poppies
<img src="/img/html/pppies.jpg" 
     alt="Van Gogh Poppies">

For additional details see our HTML img alt Reference.


Using alt

The alt attribute specifies alternative text for an image.

This text will be displayed when the image is not found, or cannot be loaded.

The alt attribute is only meaningful on image or image related elements (see below).

Alternative text is also used by screen readers and SEO to describe the image.

Tip: Include an alt attribute on all images on the page.


Syntax

<tagname alt="text" >

Values

#

Value Description
text Alternative text for an image that cannot be loaded.

Elements that accept alt

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

<area> with alt

An alt attribute on 3 <area> elements.

Computer Monitor Keyboard Mouse
<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.


<input> with alt

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.


Browser support

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

You may also like



Guides