7.1 Elemento <figure>
O uso das tags <figure> e <figcaption> em HTML fornece uma maneira semântica
de adicionar imagens e outros elementos multimídia com legendas. Essas tags ajudam a melhorar a estrutura do conteúdo,
tornando-o mais acessível e compreensível tanto para os usuários quanto para os motores de busca. Vamos dar uma olhada mais de perto nesses elementos.
O elemento <figure> é usado para marcar conteúdo autônomo que ilustra ou
explica o restante do documento. Ele pode conter uma imagem, gráfico, vídeo, áudio, tabela ou até mesmo um bloco de código.
Normalmente, o elemento <figure> é usado junto com o elemento <figcaption>,
que adiciona uma legenda ao conteúdo de <figure>.
Sintaxe
<figure>
<!-- Aqui pode haver qualquer elemento multimídia, por exemplo, uma imagem -->
</figure>
Exemplos de uso:
Exemplo 1: Imagem com legenda
<figure>
<img src="example.jpg" alt="Exemplo de imagem">
<figcaption>Legenda para a imagem, explicando seu conteúdo</figcaption>
</figure>
Exemplo 2: Tabela com legenda
<figure>
<table>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
</tr>
</table>
<figcaption>Legenda para a tabela</figcaption>
</figure>
7.2 Elemento <figcaption>
O elemento <figcaption> é usado para adicionar uma legenda ao conteúdo do elemento
<figure>. Ele pode ser colocado tanto antes quanto depois do conteúdo de <figure>,
dependendo das preferências do desenvolvedor ou dos requisitos de design.
Sintaxe
<figure>
<!-- Conteúdo do elemento figure -->
<figcaption>Legenda para o conteúdo</figcaption>
</figure>
Exemplos de uso:
Exemplo 1: Legenda após a imagem
<figure>
<img src="landscape.jpg" alt="Paisagem">
<figcaption>Bela paisagem com montanhas e lago</figcaption>
</figure>
Exemplo 2: Legenda antes da imagem
<figure>
<figcaption>Bela paisagem com montanhas e lago</figcaption>
<img src="landscape.jpg" alt="Paisagem">
</figure>
7.3 Acessibilidade e SEO
O uso dos elementos <figure> e <figcaption> melhora a acessibilidade e SEO
do seu site. Os leitores de tela, usados por pessoas com deficiências, entendem melhor o contexto
da imagem graças à tag semântica <figcaption>. Os motores de busca também consideram a estrutura
do documento HTML, o que ajuda a melhorar o índice e o ranking da página.
Exemplos de uso em vários contextos:
Exemplo 1: Embutindo um gráfico
<figure>
<img src="chart.png" alt="Gráfico mostrando crescimento de vendas">
<figcaption>Gráfico mostrando crescimento de vendas no último trimestre</figcaption>
</figure>
Exemplo 2: Conteúdo de vídeo com legenda
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Seu navegador não suporta vídeo.
</video>
<figcaption>Exemplo de vídeo demonstrando o funcionamento do produto</figcaption>
</figure>
Exemplo 3: Código com explicação
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>Exemplo de função em JavaScript que imprime "Hello, world!" no console</figcaption>
</figure>
7.4 Estilo e formatação com CSS
A estilização dos elementos <figure> e <figcaption> com CSS permite criar
uma apresentação visual atraente e melhorar a percepção do conteúdo.
Exemplo com aplicação de estilos:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>Vista bonita da natureza</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Natureza">
<figcaption>Vista bonita da natureza</figcaption>
</figure>
O uso dos elementos <figure> e <figcaption> fornece uma maneira semântica
e estruturada de adicionar conteúdo multimídia com legendas nas páginas web. Esses elementos não apenas
melhoram a acessibilidade e SEO, mas também tornam o conteúdo mais compreensível e estruturado para os usuários.
GO TO FULL VERSION