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