FAQ: Semantic HTML - Figure and Figcaption

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?

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

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

1 Like

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!

1 Like

Well played, awesome (but weird) fix!

1 Like

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.

Quite a lot asked here regarding the alt attribute, whether to include it or not. My question would be, does Google’s algorithm treat the < figcaption > the same as the alt attribute as far as SEO goes, i.e. normally from an SEO standpoint you’d want to include some kind of keyword in the alt attribute and also possibly the title attribute, so would the < figcaption > be good enough, or would you still want to add the alt and title attributes?

From an SEO standpoint, one would expect <figcaption/> to have more weight than a title attribute. We should not compare it to an alt attribute as that is an accessibility requirement, not SEO. Search engines largely ignore it, full knowing it is intended for assistive technologies. Any weight it would get would be for quality and brevity. We should not optimize alternate text but use it as intended.

title only adds a tooltip to the image, and would be overkill if FIGCAPTION is used. Less verbosity is better when it comes to screen readers.