1 00:00:00,400 --> 00:00:05,050 At the end of the previous video, I suggested that you add the vr-user.jpg 2 00:00:05,050 --> 00:00:11,050 image inside the article.html file, located inside the 2017 subfolder. 3 00:00:11,050 --> 00:00:14,105 If you haven't done that part yet, that's okay, I'll quickly teach you how. 4 00:00:14,105 --> 00:00:19,065 So to display the image we need to reference a file in the image directory 5 00:00:19,065 --> 00:00:22,475 from inside the articles in 2017 subfolders. 6 00:00:22,475 --> 00:00:26,197 So we need to move out of the 2017 and articles subfolders, 7 00:00:26,197 --> 00:00:30,857 back up to the root, and then back down inside the img folder. 8 00:00:30,857 --> 00:00:32,784 So over in article.html, 9 00:00:32,784 --> 00:00:37,322 let's add an image element right below the closing header tag. 10 00:00:43,310 --> 00:00:45,231 Add the source attribute and 11 00:00:45,231 --> 00:00:50,790 remember to instruct the browser to go up one level, out of the current folder, 12 00:00:50,790 --> 00:00:54,660 we include a ../ in the file path and 13 00:00:54,660 --> 00:00:58,220 in this case we need two to go up to the root of the project. 14 00:00:59,450 --> 00:01:05,391 Then, to reference the image inside the img folder, 15 00:01:05,391 --> 00:01:10,288 I'll add the path /img/vr-user.jpg. 16 00:01:10,288 --> 00:01:15,042 Let's provide some alt text with the alt attribute. 17 00:01:15,042 --> 00:01:17,962 And this text will say User trying a VR headset. 18 00:01:23,153 --> 00:01:27,240 Click over to our article and there you go. 19 00:01:27,240 --> 00:01:28,420 There's our VR user image. 20 00:01:29,795 --> 00:01:34,960 HTML also provides elements that add visible descriptions to image elements. 21 00:01:34,960 --> 00:01:38,280 In magazines, newspapers and books for example, images and 22 00:01:38,280 --> 00:01:42,350 illustrations are usually accompanied by a caption describing them. 23 00:01:42,350 --> 00:01:46,623 So the figure element provides a container for images and their caption. 24 00:01:46,623 --> 00:01:50,840 And the figcaption element lets you add a caption to an image. 25 00:01:50,840 --> 00:01:53,680 It associates a caption with its apparent figure element. 26 00:01:53,680 --> 00:01:57,232 So now let's add a caption to the image in the about section. 27 00:01:57,232 --> 00:02:04,112 So in index.html, we'll wrap our image tag and figure tags 28 00:02:12,282 --> 00:02:18,570 Next below the image, we will nest a set of opening and closing figcaption tags. 29 00:02:22,262 --> 00:02:26,706 So figcaption is closely related to the alt attribute you learned 30 00:02:26,706 --> 00:02:29,030 about in the previous video. 31 00:02:29,030 --> 00:02:32,120 It's a supporting description displayed with the image. 32 00:02:32,120 --> 00:02:35,130 So for this, I'll select and cut 33 00:02:35,130 --> 00:02:40,800 the text inside the images title attribute and paste it inside the figcaption. 34 00:02:40,800 --> 00:02:43,353 And we can also delete the title attribute from the image tag. 35 00:02:46,908 --> 00:02:48,190 We'll give this a save. 36 00:02:49,790 --> 00:02:50,570 Refresh the browser. 37 00:02:50,570 --> 00:02:53,240 Let's click back to Home. 38 00:02:53,240 --> 00:02:54,970 And as you can see, by default, 39 00:02:54,970 --> 00:02:58,470 the browser applies space around a figure element. 40 00:02:58,470 --> 00:03:00,410 So now it's indented. 41 00:03:00,410 --> 00:03:03,950 And you're also able to nest multiple images within one 42 00:03:03,950 --> 00:03:07,950 figure element with a single caption, if they all share the same caption. 43 00:03:07,950 --> 00:03:12,030 So feel free to add images to the project and place them inside figure elements and 44 00:03:12,030 --> 00:03:13,940 apply captions with figcaption.