Let's break it down...

Images are placed in a webpage using the <img/> tag. But of course, the tag alone doesn't say anything about which image you're using. It just tells the browser to start an image at this point in your page. We tell the <img/> tag about the image in a manner similar to how we give a hyperlink its destination.

<img/>

The src attribute establishes the "source" the tag should be referencing. Using a URL, we instruct the browser where to find our image file and bring it into our tag's location on the webpage.

<img src=""/>

This process displays only the data the browser retrieved from the image file—the image file itself is not stored with the HTML file. If you change the location of your image file, the URL will be inaccurate, and the browser can no longer display the image on your webpage. So, the same rules as hyperlinks should apply. If you're referencing an image file in your own website domain, relative URLs should be used so that images don't break when you move them from your local directory to your live website. But any links that point to images outside your domain still need an absolute URL.

Let's use a familiar example...

• Root Directory Folder
  • index.html
  • page1.html
  • images folder
    • image1.jpg

The Root Directory contains two html files and an images folder that contains one image. If we wanted to link the image in the images folder to the index.html document, we would use a relative link.

<img src="images/image1.jpg"/>