A introdução do HTML5 trouxe muitos novos elementos projetados para criar documentos e aplicativos mais significativos. Entre estes, o O elemento se destaca como uma ferramenta versátil para adicionar conteúdo de mídia junto com suas legendas a uma página da web.
Introduzido oficialmente em outubro de 2014 como parte da especificação HTML5 do World Wide Web Consortium (W3C), o HTML
O elemento encapsula mídia como imagens, diagramas, fotos e trechos de código.
Sintaxe
A sintaxe (incluindo o opcional
elemento) é o seguinte:
1
2
src="path_to_image"alt="alternative text">
3
Caption for the image
4
Exemplos
Abaixo estão alguns exemplos de diferentes casos de uso para o elemento figure. Você pode incluir todos os tipos de rich media junto com uma legenda, conforme mostrado.
O O elemento pode ser estilizado como qualquer outro elemento em nível de bloco.
Figura com uma imagem
1
2
src="images/sample.jpg"alt="A sample image">
3
This is a sample image.
4
↓
Figura com trecho de código
1
2
3
function helloWorld() {
4
console.log("Hello, world!");
5
}
6
7
JavaScript function to print "Hello, world!"
8
↓
Figura com uma mesa
1
2
3
4
Name
5
Email
6
7
8
John Doe
9
john@example.com
10
11
12
Table showing user information.
13
Figura com um vídeo
1
2
src="videos/sample.mp4"controls>
3
Sample video with controls.
4
Figura com áudio
1
2
src="audio/sample.mp3"controls>
3
Sample audio with controls.
4
↓
Atributos
O
elemento não possui atributos específicos; ele usa os atributos globais em HTML.
Contente
O
elemento aceita conteúdo de fluxo como filhos. Muitas vezes contém um ou mais elementos, opcionalmente com um elemento para fornecer uma legenda.
Você sabia?
O elemento é um tipo independente de conteúdo, o que significa que pode ser afastado do fluxo principal do documento sem afetar seu significado.
O elemento, usado dentro de um elemento, pode aparecer antes ou depois do conteúdo, mas geralmente é uma boa prática colocá-lo depois.
