Dofactory.com
Dofactory.com

HTML alt Attribute

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>.

Example

#

An <img> with an alt attribute.
The alternative text is not visible because the image 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 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.


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




Last updated on Sep 30, 2023




Guides