Figuras com legenda no HTML 5

CursoSimplificando o desenvolvimento de APIs PHP com Swagger

A utilização da Tag <img> está presente em praticamente em todos os sites, seja para exibir conteúdo de artigos, propagandas, menu ou outras finalidades, o fato é que ela é um Tag que assume várias responsabilidades diferentes em um mesmo site. Pensando nisso o HTML 5 conta com a Tag <figure>, onde deve ser utilizado para especificar que a imagem faz parte de um artigo.

Imagine este artigo, do SatellaSoft, ele contém imagens que são utilizadas para ilustrar o conteúdo apresentado, porém quando um motor de busca ou até mesmo o navegador acessar esta página, ele não vai saber do que se trata estas imagens já que ela não possui especificações, mas se for utilizado com a Tag <figure>, logo o browser saberá que se trata de uma figura utilizada no artigo.

Com o uso da Tag Figure, não depreciamos a Tag img, ao contrário, ela continua sendo utilizada, porém dentro da Tag Figure, para exemplificar a utilização, confira o código e a imagem abaixo.

Código 01:

<figure>
	<img src="balao.png" alt="Balão" />
</figure>

Como é possível notar neste exemplo, não podemos notar a utilização da Tag Figure, apenas olhando o código da página. Isto é muito bom, pois ela não interfere na utilização nem aparência das imagens.

A Tag Figure conta com uma outra Tag filho que é <figcaption>, quando utilizada, apresenta uma legenda na imagem, veja sua utilização a seguir.

Código 02:

<figure>
	<img src="balao.png" alt="Balão" />
	 <figcaption>Figura 1 - Balão (imagem: Freepik)</figcaption>
</figure>

Veja na imagem que a legenda foi adicionada abaixo da figura, com um pequeno espaçamento.

Ainda é possível inserir várias imagens dentro da Tag Figure, porém apenas com uma legenda, veja no exemplo abaixo a utilização de três réplicas da imagem Balão.

Código 03:

<figure>
	<img src="balao.png" alt="Balão" />
	<img src="balao.png" alt="Balão" />
	<img src="balao.png" alt="Balão" />
	<figcaption>Figura 1 - Balão (imagem: Freepik)</figcaption>
</figure>

Com CSS 3, é possível personalizar completamente a Tag Figure e Figcaption, o que torna ainda mais flexível a utilização deste elemento, veja um exemplo completo abaixo.

Código 04:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Figure</title>
		<meta charset="utf-8" />
		<style>
			#fig1{
				color: blue;
			}
			
			#fig1 span{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<figure id="fig1">
		  <img src="balao.png" alt="Balão" />
		  <figcaption><span>Figura 1</span> - Balão (imagem: Freepik)</figcaption>
		</figure>
	</body>
</html>

Bom, até aqui vimos como utilizar a Tag Figure e Figcaption, com este conhecimento e um pouco de Javascript, podemos criar uma sequência de Figuras que vão trocando automaticamente, ou algo bem próximo de um Slider.

Antes de prosseguir, confira um exemplo de uso do Figure em meio a textos, http://satellasoft.com/exemplos/figuretag/figure.html.

Veja no exemplo abaixo um Script, que recebe três imagens, três legendas e altera a Figura a cada dois segundos.

O Script foi desenvolvido para que você possa utilizar em seu projeto, basta alterar o Json, o valor da variável time e figureTotal.

Código 05:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Figure</title>
		<meta charset="utf-8" />
		<style>
			#fig1{
				color: blue;
			}
			
			#fig1 span{
				font-weight: bold;
			}
			
			p{
				text-align: justify;
			}
		</style>
		
		<script>
			document.addEventListener("DOMContentLoaded", function(){
				var figuras = {"figuras" : [
					{"url" : "balao.png", "legenda" : "Balão Azul, em um lindo céu"},
					{"url" : "arvore.png", "legenda" : "Floresta cheia de Árvores"},
					{"url" : "casinha.png", "legenda" : "Casinha do Ted"}
				]};
				
				var obj = JSON.parse = figuras;
				
				var figureIndex = 1;
				var figureTotal = 3;
				var time = 2000;
				var img = document.getElementById("img");
				var caption = document.getElementById("caption");
				
				setInterval(function(){
					if(figureIndex == figureTotal){
						figureIndex = 1;
					}else{
						figureIndex++;
					}
					alternate(figureIndex);
				}, time);
				
				function alternate(figureIndex){
					img.src = obj.figuras[figureIndex - 1].url;
					caption.innerHTML = obj.figuras[figureIndex - 1].legenda;
				}								
			}, false);
		</script>
	</head>
	<body>
		<figure id="fig1">
		  <img src="balao.png" alt="Balão" id="img" />
		  <figcaption id="caption"></figcaption>
		</figure>
	</body>
</html>

Com este artigo, você já pode começar a mudar a estrutura de seus projetos, espero que tenham aprendido, até a próxima!