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

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!

6 posts were split to a new topic: Can figure and figcaption be used for videos and gifs as well?

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?

4 Likes

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.

4 Likes

There is a semantic tag that could separate all media from all the code of HTML, like <nav> do with <anchors> that separate it from all the code, exist a tag that separates all media elements like img, gif, etc in a solo chunk?

Also is it a good practice to do this with <figure> semantic tag?

In this lesson you say:

Usually, <figcaption> will go inside <figure> . This is different than using a <p> element to describe the content

I can’t understand what the difference between a “p” tag and “figcaption” tag except the semantic meaning.

figure position is independent of the document’s flow.

Can i get a little more explanation about this.

My understanding of the position being independent was that a figure is media that can be anywhere on the page, in other words, its location doesn’t impact its meaningfulness. Compare this to when you might use an img tag to put an image in a very specific place. If you go back and re-read the information for when an aside tag is applicable, it’s the same logic just for media instead of text.

As for the figcaption vs p question, I tried replacing it in the exercise and the only presentation difference was that p spaced the text further from the image. It might be possible that the only difference is the semantic meaning, I think that’s the undertone to this whole lesson.

2 Likes

So based on this does the element count for metadata or is that only through the alt=" " attribute?

I am not entirely sure, so maybe someone else could clarify.

Looking at it from my view, I would say that it could count for metadata only when the caption would be the same as your alt, as in that case, the alt is not required. If your caption does not describe the figure in any way, then I would say its not metadata as it does not provide any useful information about the figure, in which case the alt attribute would be a good option to include and that would become the metadata for the figure.

1 Like

Thank you @zs-kev for the response.

It keeps saying that I’m using the wrong url but I literally copy and pasted the url it gave in the exercise. Can someone tell me what’s going on?

<figure>
  <img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg">
</figure>

Something seems to be broken. I copy and pasted the solution into the exercise and it’s still throwing me an error.

Edit: nevermind what I wrote previously

It doesn’t look like you’re doing anything wrong, but the instruction validates on my end.

Just curious – which browser are you using?

1 Like

I appreciate the response! No, it’s still throwing this error at me:

Error: Did you insert the correct link using the (src) attribute

Just saw your edit: Chrome

screen1

screen2

So this works on Firefox, but not Chrome apparently

1 Like

I started turning extensions off and found out my Adblock extension was causing it to fail for some reason. I turned it off and pressed Run and it passed. Really strange. Hopefully this helps troubleshoot other people in the future.

Thank you for giving me some of your time!

2 Likes

Well played, awesome (but weird) fix!

2 Likes

Why we talk about semantic but if i inspect a random page of codecademy most of the time is used the “div” tag? Semantic is not really important?

We can still write semantic markup using only the HTML 4 elements as we always have. The new elements only make it easier to see what would be hard to spot semantics. We give meaning through structure, not just the tags we use.

What’s the difference between alt="" and <figcaption></figcaption>?

Quite a lot, actually, though they are both connected to accessibility. alt="" is an empty alternate text attribute that would appear in an <img> tag, and is left empty because the image has not particular relevance to the topic. It is essentially window dressing and we want screen readers and search engines to ignore it.

<figcaption/> on the other hand is not something we intend to have ignored. More the opposite. We want it to be seen and easily understood. It is a way to give an image a directly related caption so that search engines and screen readers can relate their relevance to the topic. This, and the <img> element would both be contained in the same <figure/> element. Before this element was added to the specification all we had was the title attribute and an associated <p/> element which could be wrapped in the same DIV or LI.