HTML alt Attribute

The HTML "alt" attribute is used in HTML and XHTML documents. It specifies an alternative text which must be rendered if the element cannot be displayed for some reason. The "alt" attribute can also be used by screen readers to allow visually impaired users to interact with a webpage. To be accessible, an image must have an "alt" attribute. However, it may not contain text (empty or null attribute).

You can use the "alt" attribute on the following elements: <area>, <img>, <input>.

It is required to use the "alt" attribute for the <img> element. For <input> elements, you can only use the "alt" attribute with <input type="image">.

Syntax

<img alt="alternative text">
<area alt="alternative text">

Use the "title" attribute to create a tooltip for an image.

Example of the HTML "alt" attribute used on the <area> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap">
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/">
    </map>
  </body>
</html>

Example of the HTML "alt" attribute used on the <img> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Example of the HTML "alt" attribute used on the <input> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input{
      vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="#">
      Email: <input type="email" name="Email">
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit button" width="60" height="60">
    </form>
  </body>
</html>



Do you find this helpful?

Related articles