Tutorial de HTML5 - Imagens e Figuras: < figure > e < figcaption >

Neste tutorial de Imagens, vamos aprender como inserir figuras, imagens e fotos usando o HTML5.
Vamos ver o que há de novo e traçar um paralelo sobre o uso de imagens no antigo HTML e no CSS.
Apostila HTML Progressivo: Fazer download

Imagens em HTML5 - O que mudou ?

Quanto mais estudamos HTML5, mais temos certeza: ele veio para deixar as coisas mais simples, diretas e terem mais sentido.
O uso de figuras em HTML5, através das tags <figure> e <figcaption> (para legendas), deixa isso bem claro.

Se lembrar bem de nosso Tutorial de Imagens em CSS, indicamos o uso do elemento <div> para dividir e estruturar cada imagem, para usar o CSS na estilização da imagem.
Porém, a tag div é a mais genérica possível, pois usamos div para imagens, cabeçalho, menu, rodapé e uma porção de outras coisas ("div mania").

Isso não é nada semântico, não facilita a vida do Webmaster, pois é tudo div.
E é aí que entra, mais uma vez, o HTML5 para nos ajudar.

Se você bater o olho em uma div, não vai saber exatamente sua função.
Mas se ver o elemento <figure>, seu nome por si só já diz tudo sobre o que vai encontrar naquele trecho de código.

,Vale salientar que o elemento <figure> e <figcaption> não serve somente para imagens e fotos, mas também serve para diagramas, gráficos, textos (como poemas, código-fonte, citações etc).

Agora nossas imagens não são apenas divs flutuantes, são elementos independentes, é uma peça à parte do "fluxo" do documento, que pode ser retirada sem alterar esse fluxo.

Como Inserir Figuras em HTML5: <figure>

Para usarmos figuras, fotos e imagens em nossos sites, usando o HTML5, devemos usar os elementos <figure> e </figure>, como se usa normalmente uma tag. Sem segredo.

Dentro destas tags de abertura (<figure>) e fechamento (</figure>) iremos colocar nossas conhecidas tags de imagens, que aprendemos nos tutoriais de imagens em HTML, como a tag <img>.

Para colocar uma imagem de nome "html5.png", com os atributos "src", "alt", "title", "width" e "height", que está localizada no mesmo diretório (pasta) de nosso documento .html, fazemos:

<figure>
 <img src="html5.png" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
</figure>

Fazendo isso, deixamos nosso código bem mais semântico e de acordo com as novas normas e padrões do desenvolvimento web. Este elemento é uma unidade independente do restante do documento, e bem mais fácil de se identificar em meio a um código HTML/CSS.

É possível também usarmos várias imagens dentro da mesma tag <figure>:

<figure class="html5">
 <img src="html5.png" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
 <img src="css.png" />
</figure>

Legenda em Figuras no HTML5 - <figcaption>

Uma prática que todo bom Webmaster deve ter, é adicionar legendas em suas fotos, imagens e figuras. Isso é de praxe em jornais e revistas impressas, por exemplo.

Mas o motivo não é o de apenas dar uma informação adicional para imagem.

Usar legenda também é bom para SEO (otimização para motores de busca), pois podemos, por exemplo, dizer ao Google sobre o que se trata aquela imagem.

Existe mais de uma maneira de inserir legendas em imagens e outros elementos, como através do uso das tags <legend> e <caption>, ou mesmo um parágrafo <p> dentro de uma div, com o texto corretamente alinhado e formatado.

Em HTML5, não precisamos nos estressar com isso.
Basta usar o elemento <figcaption> dentro da tag <figure>.

A única regra é que devemos usar o "figcaption" dentro do "figure", e entre as tags <figcaption> e <figcaption> nós escrevemos o texto que será a legenda, veja:

<figure class="html5">
 <img src="html5.png" alt="Tutorial de CSS" title="Logo do CSS" width="150" height="150" />
 <figcaption>Tutorial de HTML5</figcaption>
</figure>