Html figure

Html Figure – Como usar ?

Como utilizar os elementos semânticos figure e figcaption no Html5

Neste artigo vamos abordar dois elementos semânticos figure e figcaption, que vieram no HTML5, eles servem para exibir uma imagem e a descrição da mesma.

O elemento Html figure é para ser usado em conjunto com o elemento <figcaption> . Sua finalidade é para marcar diagramas, ilustrações, fotos, e fragmentos de código (entre outros conteúdos).

Dentro da tag <figure>, inserimos uma tag <img> com a imagem e opcionalmente uma tag <figcaption> com a descrição/legenda da imagem

Uso dos elemementos <figure> e <figcaption>

O elemento <figure> contém uma imagem sem legenda:

Veja o código na pratica:

<figure>
  <img src="imagem/logo.jpg" alt="Logo tipo da sua empresa">
</figure>

O elemento <figure> contém uma imagem e uma legenda explicativa:

<figure>

  <img src="imagem/html.jpg" alt="Capa do Post Sobre Html">

  <figcaption>
      Códigos html prontos Blog Loop Nerd 
      <a href="https://www.loopnerd.com.br/codigos-html-prontos/">Códigos Html Prontos</a>
   </figcaption>

</figure>

Veja mais Artigos Sobre Tags do html5