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