A website with only text gets boring after a while. In this chapter you'll learn how to add images - one of the most important elements for making a website feel alive.

The <img> element

<img src="ball.jpg" alt="A white football on a green pitch">

Just like <br> and <hr>, there's no closing tag - <img> is a single, self-closing element. Two attributes are new here:

• src ("source"): the path to the image file - exactly like href for links, this can be a relative path (your own file) or an absolute path (someone else's website).
• alt ("alternative text"): a text description of the image.

Why the alt attribute matters so much

The alt attribute has three important jobs:

1. People who are blind or have low vision have websites read aloud by a screen reader. The screen reader reads out the alt text, since it obviously can't "see" the image itself.
2. If an image fails to load for some reason (wrong file name, slow internet), the browser shows the alt text instead.
3. Search engines like Google read the alt text to understand what an image shows - this helps your page get found.

Creating an images folder

Before we can add an image, we need one. Create a new subfolder called images in your project folder and put a photo there (for example your own photo, or an image you're legally allowed to use - more on that in the next chapter).

my-website/
  index.html
  players.html
  images/
    ball.jpg

Relative paths into a subfolder

To reference a file inside a subfolder, write the folder name, a forward slash, then the file name:

<h2>Our Ball</h2>
<img src="images/ball.jpg" alt="A white football on a green pitch">

Save and look at the image in your browser. If the image doesn't show up, check closely: is the file really inside images/? Is the file name (including capitalisation and the file extension like .jpg or .png) spelled exactly right?