Do we use figure or figcaption for videos or gifs mentioned in later sections?
From what I have read on the topic,
<figcaption> can be used for videos and gifs.
<figure> element essentially isolates its content from its ancestor’s content, so it basically separates its content from the rest. This means that whatever’s inside the figure doesn’t contribute to the document outside of it. It behaves as a structural element of the page and can, therefore, contain its own headings, images, videos, audio, and so on.
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning. - HTML5 Doctor
Copy and paste this code into your code editor, and then save it as whatever.html, launch it, and see what happens. Give it a go with Gifs and other types of files.
<!DOCTYPE html> <html> <head> <title>Testing Figure and Figcaption</title> </head> <body> <header> <h1>Testing Out Figure and Figcaption on a Video</h1> </header> <main> <figure> <iframe width="560" height="315" src="https://www.youtube.com/embed/WGEpBMxbbFg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <figcaption>Here is an interesting video from Codecademy.</figcaption> </figure> <p>The same formating can be applied to gifs, audio, and other HTML elements.</p> </main> </body> </html>
Hope this helps,
In the lesson,
We placed an image, audio, video, and then GIF. Why didn’t we encapsulate the entire code in
each individual element in
Why was only the image singled out for the example?
Thanks in advance.
It mainly has to do with semantics.
Remember that whatever is in-between the
<figure> tags is being isolated from the rest of the document. So this means that you can remove it or move it elsewhere without affecting the flow of the document.
In the example they did, you could put the audio or the video or the gif within their own
<figure> tags, but maybe you want the video or the audio or whatever to be part of the main flow, of the document, in which case the figure element isn’t really necessary.
All of the above has to do mainly with semantics. You don’t have to put any of it in a
<figure> tag, but maybe in its context it might be the more semantic way of doing it.
Do I use and for videos or audios?
Thanks a lot!
"<video src="coding.mp4" controls>Video not supported</video>"
If we use the
<figcaption> element then would we still need an
alt attribute for the
<img>? I still use an
alt in my examples and practice but I’m wondering if that’s redundant, because wouldn’t a screen reader also read the content of the
<figcaption> element back to the user?
It wouldn’t harm using both for semantic purposes and keeping their syntactic meanings. Use
alt attribute for describing the
<img> in short but give more elaborate explanation for
<figcaption> element like example below.
<figure> <img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> </figure>