Quero colocar legendas nas minhas fotos e gostaria de saber se eu posso usar a tag <figcaption>
sem precisar usá-la dentro da tag <figure>
?
<img src="_fotos/imagem-2.jpg" alt="" title="">
<figcaption>legenda da foto...</figcaption>
Conforme dito no comentário não use apenas a tag <figcaption>
sem a tag <figure>
antes. <figcaption>
deve ser filho (estar dentro) de <figure>
ou vai quebrar a ordem semântica.
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.
"O elemento HTML <figcaption>
representa uma legenda ou uma legenda associada a uma figura ou uma ilustração descrita pelo restante dos dados do elemento <figure>
que é seu ancestral imediato."
Documentação Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
<small>
Se vc quer fazer uma legenda com os direitos autorais para sua imagem de forma um pouco mais semântica vc pode usar a tag <small>
<small>legenda da foto...</small>
Link documentação 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.
"Em HTML5, esse elemento é redefinido para representar comentários secundários e letras pequenas, incluindo direitos autorais e texto jurídico, independentemente de sua apresentação estilizada."
<aside>
Ou também pode usar a tag <aside>
apesar da ressalva que vc pode ler abaixo. Aside é um conteúdo indireto relacionado ao conteúdo principal, então se a imagem faz parte do foco do assunto use <small>
, mas se o texto da imagem for apenas algo secundário e não diretamente ligado ao assunto principal do qual a imagem faz parte ai talvez o aside
lhe sirva. Tente entender como o leitor de tela vai ler o texto e se esse texto deve ser um <small>
ou <aside>
<aside>legenda da foto...</aside>
Documentação da Mizilla sobre a 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.
"O elemento HTML <aside>
representa uma parte de um documento cujo conteúdo está apenas indiretamente relacionado ao conteúdo principal do documento."
Existe ainda a opção de usar a tag <details>
mas parece que os browsers ainda não dão muito suporte para ela. https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/details
OBS: E o principal, não se esqueça de colocar o atributo alt=""
na sua tag de img
e colocar uma descrição completa. O Alt
é fundamental para os leitores de tela!
<figcaption>
deve, obrigatoriamente, possuir um elemento<figure>
como pai. Qual o problema de utilizá-lo?<small>
ou<aside>