FAQ: Semantic HTML - Figure and Figcaption

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.

Why isn’t the alt attribute used in this exercise? This is confusing as it seems that the alt attribute isn’t required if you have a figcaption element.

We cannot answer any of the why questions when it comes to course lesson plans, narrative or instructions. As far as one is concerned the alt attribute should always be present, and given a brief phrase if the picture is part of the topic. If the picture is just filler or eye candy the attribute’s value should be left empty.

Thanx! I was having the same problem sometimes, and indeed running Adblocker. Sometimes when I refresh and do exacly the same it was okay.

<figcaption> is an element used to describe the media in the <figure> tag. Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to describe the content; If we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.

My question is What is that mean by changing the location of the <figure>

It would likely have to do responsive design where media queries dictate over various device screen sizes, meaning page elements are shifted about to fit the device width. Assuming figcaption is a child of figure, it will always be directly associated with its parent.

In order to give similar behavior to a paragraph it would need to be in the same container as the image it is describing and that container could only contain the P and the IMG. At a glance, the generic structure has little in the way of semantics which is why the outline form of structure has long been where we plant our clues. FIGURE and figcaption brought semantics to bear in their locale, regardless the other objects around them.

1 Like

Greetings!
This is all very confusing and, sometimes, misleading.

Even though I am sincerely trying to understand the essence of semantic HTML, it is not easy. For example:

      <section>
        <article>
          <h2>Facts About Dogs</h2>
          <p>
          Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.
          </p>
        </article>
        <aside>
          <p>A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the greatest amount of affection!
          </p> 
        </aside>
      </section> 
      <!--Create <figure> tag here -->
        <figure>
          <img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg"/>


        </figure>

In this exercise I need to use tag in a certain place…but according to the semantic HTML shouldn’t it be used inside the section tag as it is directly related to the subject? Wouldn’t it make more sense then?

It’s either a mistake or I am completely at loss here :))) please help me
I will be very grateful!

From a document outline point of view it would make more sense, yes. There is no logical reason for the figure to be outside of its frame of reference, the ARTICLE. The section is just a container for the whole shebang, and allows for the additional aside structure.

Truth be told, unless there is a styling concern or something to do with page navigation, the section is not needed. Roll everything into the article and be done with it. When it really comes down to it, how we design the overall page is what will determine the use cases. Is it a page of articles? Or, is it a page with several sections? Both may be diverse while hinting at a differing level of specificity. That is the semantics in play at this level.

1 Like

Okay I see your point, just trying to understand the meaning of all these semantic elements at it’s best.
Thank you very much

1 Like

The elements themselves don’t give the meaning any more than a word can give meaning on its own. It is more how we thread the words together to form a phrase (an idea) or a sentence (a thesis). The way we structure the page is what gives the tags we use their meaning, not the other way around.

They are called semantic elements because they play directly into that idea and are suggestive of the author’s intent. We only need to look at the overall structure to see if the intent is genuine (meaningful) or not (contrived). True authorship is never contrived.

I’m sorry for being a bore here…but isn’t this a paradox? “The way we structure the page is what gives the tags we use their meaning”, but the only way we can give it meaning, from a semantic point of view, is by using appropriate tags?

I understand, that this is not a crucial knowledge to build a website and I got your point about the entire page layout. I guess this is just an individual approach, there is no strict schematic.

HTML and CSS both are the most forgiving APIs of all. They let anything amiss just slide under the radar. More importantly, those tags have names because of what? The people and machines who/that read them.

What is appropriate? That in itself is not a question a browser or user agent will ever ask. Only a reader would bring that level of focus into play. A human reader. Structure suggests intent at every level of the page outline. Keyword based tags (the semantic ones) are suggestive, only. There still needs to be proved the author’s intent. Does the contained fragment confirm that the author intended this as an aside, for instance?

In the days before HTML5 there was a struggle to inform the reader of the intent since there were so few (not really) elements that we could draw upon to insert structure. The resort was to give identities or class names to inform the reader (and the CSS or script). The semantic elements we have today have evolved out of that and removed the need for identities (page fragments) or classes (grouping elements) to convey meaning. The tag became the label, rather than the attribute specified within the tag. Header, footer, nav, aside, section, article, main, &c. were all common ids or classes at one time.

Got it, boss!

Thank you for your patience :slight_smile:

1 Like

You’re welcome, boss! Thank you for your patience.

@mtf Need your help.
So in the exercise when we use figcaption, the caption on the page is starting aligned with the image. So if the caption we write is small or large it is not in alignment with the image. How can I align the image and the caption so that middle of the caption is where the middle of the breath of the image? Without using CSS if possible. Have not yet started CSS.

Please share a screen shot of what you are describing.

Can the figure and the caption be centrally aligned? Right niow the caption starts from the start of the image.

Figcaption

figure {
  text-align: center;
}

should center align both image and text.

On the other hand, HTML does afford one presentation element that has not yet been deprecated (needs corroboration): <center></center>. Check the W3 specs or MDN to see if it is still okay to use. May solve your problem. Be sure to check how the <p></p> and that element should be implemented. Which is parent?

1 Like