Captioning Images

At the end of the previous video, I suggested that you add the vr-user.jpg 0:00 image inside the article.html file, located inside the 2017 subfolder. 0:05 If you haven't done that part yet, that's okay, I'll quickly teach you how. 0:11 So to display the image we need to reference a file in the image directory 0:14 from inside the articles in 2017 subfolders. 0:19 So we need to move out of the 2017 and articles subfolder. 0:22 Back up to the root, and then back down inside the img folder. 0:26 So over in article.html, 0:30 let's add an image element right below the closing header tag. 0:32 Add the source attribute and 0:43 remember to instruct the browser to go up one level out of the current folder. 0:45 We include a ../ in the file path and 0:50 in this case we need two to go up to the root of the project. 0:54 Then, to reference the image inside the img folder, 0:59 I'll add the path /img/vr-user.jpg. 1:05 Let's provide some alt text with the alt attribute. 1:10 And this text will say User trying a VR headset. 1:15 Click over to our article and there you go. 1:23 There's our VR user image. 1:27 HTML also provides elements that add visible descriptions to image elements. 1:29 In magazines, newspapers and books for example, images and 1:34 illustrations are usually accompanied by a caption describing them. 1:38 So the figure element provides a container for images and their caption. 1:42 And the figcaption element lets you add a caption to an image. 1:46 It associates a caption with its apparent figure element. 1:50 So now let's add a caption to the image in the about section. 1:53 So in index.html, we'll wrap our image tag and figure tags 1:57 Next below the image, we will nest a set of opening and closing big caption tags. 2:12 So figcaption is closely related to the alt attribute you learned 2:22 about in the previous video. 2:26 It's a supporting description displayed with the image. 2:29 So for this, I'll select and cut 2:32 the text inside the images title attribute and paste it inside the fake caption. 2:35 And we can also delete the title attribute from the image tag. 2:40 We'll give this a save. 2:46 Refresh the browser. 2:49 Let's click back to Home. 2:50 And as you can see, by default, 2:53 the browser applies space around a figure element. 2:54 So now it's indented. 2:58 And you're also able to nest multiple images within one 3:00 figure element with a single caption, if they all share the same caption. 3:03 So feel free to add images to the project and place them inside figure elements and 3:07 apply captions with the caption. 3:12