At the end of the previous video, I suggested that you add the vr-user.jpg

image inside the article.html file, located inside the 2017 subfolder.

If you haven't done that part yet, that's okay, I'll quickly teach you how.

So to display the image we need to reference a file in the image directory

from inside the articles in 2017 subfolders.

So we need to move out of the 2017 and articles subfolder.

Back up to the root, and then back down inside the img folder.

So over in article.html,

let's add an image element right below the closing header tag.

Add the source attribute and

remember to instruct the browser to go up one level out of the current folder.

We include a ../ in the file path and

in this case we need two to go up to the root of the project.

Then, to reference the image inside the img folder,

I'll add the path /img/vr-user.jpg.

Let's provide some alt text with the alt attribute.

And this text will say User trying a VR headset.

Click over to our article and there you go.

There's our VR user image.

HTML also provides elements that add visible descriptions to image elements.

In magazines, newspapers and books for example, images and

illustrations are usually accompanied by a caption describing them.

So the figure element provides a container for images and their caption.

And the figcaption element lets you add a caption to an image.

It associates a caption with its apparent figure element.

So now let's add a caption to the image in the about section.

So in index.html, we'll wrap our image tag and figure tags

Next below the image, we will nest a set of opening and closing big caption tags.

So figcaption is closely related to the alt attribute you learned

about in the previous video.

It's a supporting description displayed with the image.

So for this, I'll select and cut

the text inside the images title attribute and paste it inside the fake caption.

And we can also delete the title attribute from the image tag.

We'll give this a save.

Refresh the browser.

Let's click back to Home.

And as you can see, by default,

the browser applies space around a figure element.

So now it's indented.

And you're also able to nest multiple images within one

figure element with a single caption, if they all share the same caption.

So feel free to add images to the project and place them inside figure elements and

apply captions with the caption.