Image tags allow you to place images on websites. They introduce the concept of self-closing tags, a special kind of tag that has one opening tag, but no closing tag.

A standard image tag looks like this:

<img src="" alt="" />

Notice there is no ending tag here—instead we close the opening tag with a /> to indicate it is self-closing.

The image tag introduces two new attributes:

• src=""

• alt=""

“src” stands for “source,” and indicates the source path in which a file is located. Say we had a file structure that looks like so:

• /my-project

  • index.html

  • photo.jpg

If we’re writing our site’s code in index.html and want to make sure photo.jpg is rendered when we visit our site, within an image tag’s src attribute, we’d reference where photo.jpg is relative to index.html:

<img src="./photo.jpg" />

Since index.html and photo.jpg are both in the /my-project folder, we can indicate that the source path of photo.jpg starts within the same folder by using a ./. We then reference the full name of the file we want to pull in (extension included), and then, when we run index.html in a browser, our image should be rendered on the screen.

Referencing Nested Images

Let’s do an example where our image is inside of a folder within our project.

For this project, we’ve decided we want a bit more structure for our files. Rather than place all of our images within our root directory, we’ve put them all inside a folder called /images for organizational purposes:

• /my-project

  • index.html

  • /images

    • photo.jpg

Given we’re still writing our code in index.html, if we wanted to render our image out when running index.html, we’d reference our image path like so:

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

All we’re doing here is indicating we start from the root directory with ./, going into the /images directory, then referencing our file name with /photo.jpg.

With this, our image will still be rendered, but we get to use the nice organizational structure supplied with the /images directory.

Referencing Images In Child Directories

If you’d like to go down a directory, rather than up like we just did in the nested folder example, you’ll want to use .. syntax.

Let’s say, for whatever reason, our index.html file is also inside of a directory:

• /my-project

  • /html

    • index.html

  • /images

    • photo.jpg

If we still want to reference photo.jpg, now we must go down a directory, then up one into /images. To go down a directory, we use the .. syntax mentioned earlier. To reference the image correctly, our code would look like:

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

Notice how were no longer using ./. Since our image isn’t in the same directory as index.html anymore, we no longer state that using ./. Instead, we state we want to go down a directory with ../. Once we go down one directory, then, we can go up one into /images then reference our final image location with /photo.jpg.

You can chain on multiple ../ syntax keys if you need to go down multiple directories to get to your image location: ../../images/photo.jpg.

The syntaxes are quite flexible, so use them as needed to get to your final destination.

If your image isn’t rendering correctly, it’s likely that your not referencing the correct path, so double check your src attribute, and see if you’re making correct use of the double dots and directory nesting.

Alt Tags

The final thing we’ll cover in this lesson is the alt tag. Alt stands for “alternative text,” it’s used for accessibility purposes, I.e. making sure people with vision issues can still understand what your image consists of.

Someone with vision issues may not be able to tell what an image is displaying, as a result, this person may use what’s known as a screen reader to help read content from a website. It’s easily assumed that a screen reader can read text from a website, but what about images? This is where the alt tag comes in.

By inserting “alternative text” into an alt tag, you can write a quick description for what your image displays so those using a screen reader can understand exactly what’s on your site. Here’s an example:

<img src="./images/logo.svg" alt="Chris Courses Logo" />

Without the alt tag, someone with vision disabilities might not be able to tell what is displayed on the top left of a website (usually it’s a logo). However, since this image has that alt tag, that person can use their screen reader to verbally tell them that that image is the “Chris Courses” logo.