Elemento HTML: figura | Envato Tuts+

0
Tutoriais
05/10/2023
A+ A-
Email Print

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




      
[email protected]








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.

Saber mais

[ad_2]

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta