HTML 5: elementos figure e figcaption

figure figcaption html 5

Por vezes necessitamos de publicar uma imagem ou gráfico seguida por uma pequena legenda. Antes da HTML 5 não tinha uma maneira de aplicar semanticamente esse tipo de conteúdo na marcação HTML, e tínhamos que nos valer de nomes de classes e CSS.

Mas agora é possível fazer uma marcação semântica para esta finalidade com os elementos <figure> e <figcaption>.

O elemento <figure> marca um bloco de conteúdo independente que normalmente contém imagens, gráficos, diagramas ou ilustrações que fazem referência ao conteúdo principal do documento. Enquanto o elemento <figcaption> exibe uma legenda para o elemento figure. Este novo elemento age como subtítulo opcional ou legenda para qualquer conteúdo contido dentro do elemento <figure>.

Vamos examinar estes elementos mais detalhadamente neste artigo.

O elemento <figure>

Este elemento serve para englobar conteúdos independentes que sejam relacionados a um conteúdo específico na página web. Usamos esse elemento para marcar conteúdos do tipo como imagens, ilustrações, diagramas, fotos, vídeos, linhas de códigos…

Exemplo de uso:

<figure>
    <img src="imagem_exemplo.jpg" alt="vestibulum-ullamcorper-tellus" width="620" height="310" />
</figure>

Os conteúdos que estiverem dentro do <figure> podem ser movidos para longe do fluxo principal da página sem afetar o significado da página. Pode ser acompanhado pelo elemento <figcaption>.

Escusado será dizer que não o devemos aplicar em todas as nossas imagens, pois isso não é correto. Devemos pensar em como a imagem é utilizada na nossa página web:

  • Se a imagem faz parte do conteúdo da página mas se for movida para outro local não perde o seu significado, é sinal que ela pode ficar dentro do novo elemento <figure>.
  • Se a imagem for um ícone de navegação, um logotipo, imagens que devem estar num local específico em um artigo (tipo: tutorial passo-a-passo, com várias imagens na página) não devem estar marcadas com o elemento <figure>.

O elemento <figcaption>

Utilizado para marcar uma legenda para conteúdos inseridos com uso do elemento <figure>. Deve sempre constar entre o elemento <figure>, ou seja, deve constar como elemento-filho do elemento-pai <figure>. A tag <figcaption> só é válida dentro do elemento <figure>.

Exemplo de uso:

<figure>
    <img src="imagem_exemplo.jpg" alt="Vestibulum ullamcorper tellus" width="620" height="310" />
    <figcaption>
        Vestibulum ullamcorper tellus eget nunc pellentesque tincidunt.
    </figcaption>
</figure>

Estes elementos são usados ​​em combinação para uma melhor acessibilidade e maior clareza quanto ao conteúdo de gráficos, imagens, etc.

Podemos ter várias imagens, vídeos, gráficos, dentro de um único elemento <figure>. Se houver um elemento <figcaption> ele deve ser o primeiro ou o último filho do elemento <figure> e só um <figcaption> irá representar a legenda.

<figure>
    <figcaption>
        Vestibulum ullamcorper tellus eget nunc pellentesque tincidunt.
    </figcaption>
    <video src="video_exemplo.mov">
    <img src="imagem_exemplo.jpg" alt="vestibulum-ullamcorper-tellus" />
</figure>

Usando o elemento em linhas de códigos:

<figure> 
    <figcaption>Codigo CSS para o element p:</figcaption> 
    <code> 
        p { font-size: 12px; color: #aaaaaa; } 
    </code> 
</figure>

Podemos criar vários efeitos visuais para a legenda. Isso pode ser feito através do CSS, podemos mostrar/ocultar o texto da legenda quando o rato passar sobre a imagem, mostrar o texto da legenda sobre a imagem, etc.

E você costuma usar estes elementos do HTML 5? Como faz para usa-los? Comente!

Um abraço e até já!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *