As stated in the comment, do not just use the <figcaption>
tag without the <figure>
tag before. <figcaption>
must be child (within) of <figure>
or will break the semantic order.
The HTML <figcaption>
element represents 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 <figcaption>
HTML element represents a caption or caption associated with a figure or an illustration described by the rest of the data of the <figure>
element that is its immediate ancestor." >
Mozilla Documentation: link
Tag <small>
If you want to make a copyright subtitle for your image in a slightly more semantic way you can use the tag <small>
<small>legenda da foto...</small>
Link documentation Mozilla tag small: link
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 comments and fine print, including copyrights and legal text, regardless of their stylized presentation."
Tag <aside>
Or you can also use the <aside>
tag despite the caveat that you can read below. Aside is an 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 connected to the main subject of which the image does then maybe% wont work for you. Try to understand how the screen reader will read the text and whether this text should be aside
or <small>
<aside>legenda da foto...</aside>
Mizilla documentation on the tag aside: link
The HTML <aside>
element represents a portion of a document whose
content is only indirectly related to the document's main content.
"The <aside>
HTML element represents a part of a document whose content is only indirectly related to the main content of the document."
There is still the option to use the <aside>
tag but it seems that browsers still do not give much support to it. link
OBS: And foremost, do not forget to put the <details>
attribute in your alt=""
tag and put a full description. img
is critical for screen readers!