Preview
Video Player
00:00
00:00
Captioning Images
3:15HTML provides elements that add visible descriptions to <img> elements.
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 subfolders,
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 figcaption 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 figcaption.
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 figcaption.
3:12