FAQ: Semantic HTML - Figure and Figcaption

This community-built FAQ covers the “Figure and Figcaption” exercise from the lesson “Semantic HTML”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to HTML

FAQs on the exercise Figure and Figcaption

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

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

1 Like

When using the figure element with an image, would we still use alt text withing the img tag, as well as figcaption to describe the image or would that be redundant?

I would say it depends on your caption. If the caption is going to be the same as alt or you are in a case where you cannot provide any Information in the alt attribute, then you can omit it.

Sometimes captions might not describe the picture, in which case an alt attribute should be added to describe the picture.