2

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>
5
  • 1
    Não. O elemento <figcaption> deve, obrigatoriamente, possuir um elemento <figure> como pai. Qual o problema de utilizá-lo?
    – Woss
    Commented 14/05/2018 às 23:28
  • 1
    "Permitted parents: A <figure> element; the <figcaption> element must be its first or last child." developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption - Ler a documentação é sempre uma boa.
    – Largato
    Commented 14/05/2018 às 23:31
  • na verdade não há problema em usa-lo. só fiquei na duvida, por que se pudesse usa-lo sem a tag figure acho que seria mais pratico Commented 14/05/2018 às 23:37
  • Sem a tag figure como pai figcaption perde o valor semântico, nesse casso use a tag <small> ou <aside>
    – hugocsl
    Commented 14/05/2018 às 23:43
  • @hugocsl como usar a tag <small> e <aside> da maneira que você ta falando ? Commented 14/05/2018 às 23:48

1 Resposta 1

2

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


Tag <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."


Tag <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!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .