Can figure and figcaption be used for videos and gifs as well?

Do we use figure or figcaption for videos or gifs mentioned in later sections?

From what I have read on the topic, <figure> and <figcaption> can be used for videos and gifs.

The <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,
Kevin

17 Likes

In the lesson,

We placed an image, audio, video, and then GIF. Why didn’t we encapsulate the entire code in

<figure></figure>

or
each individual element in

<figure></figure>

Why was only the image singled out for the example?

Thanks in advance.

1 Like

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.

4 Likes

Thank you! :slightly_smiling_face:

1 Like

Do I use and for videos or audios?
Thanks a lot!

Audio: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes ________________________________________________________________

"<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?

4 Likes

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>

Source: (http://html5doctor.com/the-figure-figcaption-elements/)

6 Likes