Figura Tag em Html
Este artigo discute a tag de figura HTML . Isso satisfaria os requisitos para o aprendizado.
A tag <figure> em HTML é usada para agrupar e encapsular conteúdo de mídia, como imagens, vídeos, áudio ou outros tipos de mídia. O elemento <figure> é normalmente usado em conjunto com o elemento <figcaption> para fornecer uma legenda ou descrição para o conteúdo de mídia.
Em um documento, utilize o elemento <figure> para marcar uma imagem e o elemento <figcaption> para designar uma legenda:
Example:
O código a seguir pode ser aplicado para estilizar <figure> e <figcaption> usando CSS:
Example:
Você também pode usar o elemento <figure> para agrupar um vídeo e sua legenda:
Example:
Uso de marca de figura HTML
Figura Html A tag <figura> contém conteúdo especializado, como ilustrações, diagramas, imagens, listas de códigos, etc.
Embora o elemento <figure> tenha uma conexão com o fluxo principal do documento, sua posição é independente, e sua remoção não deve ter nenhum efeito sobre ele.
Conselho: Para adicionar uma legenda ao <figure> , o elemento <figcaption> é aplicado.
Compatibilidade do navegador
De acordo com a tabela, os números indicam a primeira versão do navegador a acomodar totalmente o elemento HTML Figure Tag .
Elemento | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<figura> | 8,0 | 9,0 | 4.0 | 5.1 | 11,0 |
Atributos
Global
A figura da tag <figure>é totalmente capaz de aceitar Atributos Globais em HTML.
Evento
A figura do Tag <figure> pode lidar com Atributos de Evento em HTML .
Configurações padrão de CSS
Os navegadores geralmente renderizam o elemento <figure> com os valores padrão correspondentes:
figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
Benefícios da tag de figura HTML
A tag <figure> em HTML é usada para agrupar uma imagem, ilustração, diagrama ou qualquer outro tipo de mídia com sua legenda ou descrição. Aqui estão alguns benefícios de usar a tag <figure> :
- Ao usar a tag <figure> , você pode fornecer uma legenda clara e descritiva para a mídia associada a ela, o que pode ajudar a melhorar a acessibilidade de sua página da Web para usuários com deficiências.
- A tag <figure> fornece um significado semântico ao seu conteúdo, o que pode ajudar os mecanismos de pesquisa a entender melhor sua página da Web e seu conteúdo.
- A tag <figure> permite que você aplique estilos à mídia e à legenda juntos, o que pode ajudar a melhorar a aparência geral da sua página da web.
- Ao agrupar mídias relacionadas e suas legendas com a tag <figure> , você pode organizar melhor seu conteúdo e facilitar a compreensão dos usuários.
- A tag <figure> faz parte da especificação HTML5 e é amplamente suportada por navegadores modernos, tornando-a uma escolha segura e à prova de futuro para estruturar seu conteúdo.