Figuras com legenda no HTML 5 - Figure Tag

Gunnar CorreaGunnar Correa10/07/2015 às 12:31:59 - 27.515 acessos

Utilizando Figuras com legenda, através de integrações da Tag com Tags do HTML 5.


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>

HTML 5 - Figure Tag

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>

HTML 5 figcaption Tag.

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>

HTML 5 figure tag lado a lado

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>

HTML 5 personalizando figure tag.

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!

 


Tag HTML 5 CSS 3 Javascript Slider Exemple Desenvolvimento Web Client-side Documentação Tutorial Artigo

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários