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>
        <title>Testing Figure and Figcaption</title>
            <h1>Testing Out Figure and Figcaption on a Video</h1>
                <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <figcaption>Here is an interesting video from Codecademy.</figcaption>
            <p>The same formating can be applied to gifs, audio, and other HTML elements.</p>

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.


Thank you! :slightly_smiling_face:

1 Like

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

Audio: ________________________________________________________________

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

  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="">Richard Clark</a></figcaption>

Source: (



I just wanted to ask you when i used the code provided in a code editor i just changed the video source and added some other video and tried running it in the code editor but is showed an error message stating " refused to connect." can you please tell me why ?

1 Like

So basically, < figure > is the same as < aside >, but just for images videos?

1 Like

what is this actually means here? i am little bit confused by the term ‘isolated’ .

what is flow of the document and why it doesn’t affected by moving and removing element?

why would I need to isolate content from the main flow using <figure> tag?, can anyone explain with example please.

Hello @alishersadullaev3059 , i think this video will clarify your doubts.

Youtube - HTML semantics: images & figures

the video only expalins what a figure tag does, but my question is different, im asking why would anyone isolate content from the main flow.

html5 doctor describes the figure tag as:
1 self-contained
2 referenced as a single unit from the main flow
3 can be moved away

now im asking, what kind of situation would require us to isolate and separate any content from the main flow instead of placing it inside of it, and also even if its possible to move it away does that mean it would negatively affect CSS settings?

1 Like

I tried using the figcaption for both videos and gif and it worked for both. So yes it can be used. Now the question is if you are using it depending on how you want to design the website.

Same Alisher - the concept of self-contained and the knowledge of what is and is not desirable as being included in the main flow has not been covered as of yet. So an answer given in these terms raises more questions and doesn’t answer the core of “why?” that was asked in the first place.

We at least haven’t covered it in these terms yet. If anyone’s able to elaborate for those of us coming to the course fresh up to this point, it would be appreciated.

edit: What I think is the point of something being self-contained is the grouping together of it’s content/nested elements for ease of movement and readability within the document. It seems logical to use a “figure” element in order to necessarily link some media and its “figcaption” together, rather than adding an independent “p” below an “img” for the purposes of captioning.