Can I use the <figcaption> tag without using the <figure>?

Asked

Viewed 182 times

2

I want to put captions in my photos and would like to know if I can use the tag <figcaption> without having to use it inside the tag <figure>?

<img src="_fotos/imagem-2.jpg" alt="" title="">
<figcaption>legenda da foto...</figcaption>
html html5 semantics
  • 1

    No. The element <figcaption> must have a <figure> as a parent. What’s wrong with using it?

  • 1

    "Permitted parents: A <figure> element; the <figcaption> element must be its first or last Child." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption - Reading the documentation is always good.

  • in fact there is no problem in using it. only I was in doubt, because if I could use it without the tag figure I think it would be more practical

  • Without the figure tag as figcaption parent loses semantic value, in this case use the tag <small> or <aside>

  • @hugocsl how to use the <small> and <aside> tag ?

1 answer

2


As stated in the comment don’t just use the tag <figcaption> without the tag <figure> before. <figcaption> must be a child (be inside) of <figure> or break the semantic order.

The HTML <figcaption> element represents a caption or a Legend Associated with a figure or an Illustration described by the Rest of the data of the <figure> element which is its immediate Ancestor.

"The HTML element <figcaption> represents a legend or legend associated with a figure or illustration described by the rest of the element data <figure> who is your immediate ancestor."

Mozilla Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

Tag <small>

If you want to make a copyright caption for your image a little more semantically you can use the tag <small>

<small>legenda da foto...</small>

Link documentation Mozilla tag small: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, Independent of its Styled Presentation.

"In HTML5, this element is redefined to represent minor commentary and small print, including copyright and legal text, regardless of its stylized presentation."

Tag <aside>

Or you can also use the tag <aside> despite the caveat that you can read below. Aside is indirect content related to the main content, so if the image is part of the focus of the subject use <small>, but if the text of the image is only something secondary and not directly linked to the main subject of which the image is part there maybe the aside serve you. Try to understand how the screen reader will read the text and whether that text should be a <small> or <aside>

<aside>legenda da foto...</aside>

Mizilla documentation about the tag aside: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

The HTML <aside> element represents a Portion of a Document Whose content is only Indirectly Related to the Document’s main content.

"The HTML element <aside> represents a part of a document whose content is only indirectly related to the main content of the document."

There is also the option to use the tag <details> but it seems that browsers still do not give much support to her. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

OBS: And the main one, don’t forget to put the attribute alt="" in your tag of img and put a full description. The Alt is fundamental for screen readers!

Browser other questions tagged html html5 semantics

You are not signed in. Login or sign up in order to post.