Skip to content
HTML Course

alt attribute

Intro

The last thing we need to go over is the alt attribute.

The alt attribute is mainly used for accessibility. If someone visits your site and they’re blind or have low vision, they’re likely using a piece of software called a screen reader.

The screen reader reads the text on the web page aloud to the user. The screen reader can’t tell the user what’s inside of an image, however.

That’s where the alt attribute comes in. Instead of trying to understand what’s inside the image, the screen reader will simply read whatever text is inside the alt attribute.

Steps

Add value

In this case, I’ll write Laptop on desk.

<img src="laptop.jpeg" alt="Laptop on desk">

So if a blind user visited this web page, the screen reader would say “Laptop on desk” when it got to this part of the web page.

One other use of the alt attribute is that it gets displayed on the web page if the image can’t be displayed. For example, if I go back and delete the letter g from the src attribute value, the image disappears, and the alt text is displayed instead.

<img src="laptop.jpe" alt="Laptop on desk">

Now in this lesson I gave you a simplified overview of the alt attribute, but the rules around the alt attribute are actually a little more complicated.

For example, if the picture is more of a decoration on the web page and doesn’t serve a real purpose, you should leave the alt attribute blank. You still want the alt attribute there on the image element, but you just leave it with an empty pair of quotes, the way we had it originally.

End

So that’s how you create an image in HTML.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the <html> tags.

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Images</title>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <img src="laptop.jpeg" alt="Laptop on desk">
</body>