7

Lendo sobre a tag <figure> encontrei esse texto na documentação MDN:

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal. Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

A aplicação do elemento em si eu compreendi, conforme mostra esta pergunta feita aqui no site, porém não entendi os seguintes trechos do texto acima:

  1. "sua posição é independente do fluxo principal"
  2. "mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal"

O que significam essas citações enumeradas acima? Pode dar exemplo(s)?

2 Respostas 2

6

Como foi dito na pergunta, o <figure> tem sua aplicação dentro de alguns objetos visuais no documento HTML, sem contar também o seu valor semântico.
No entanto, esses recursos não devem ser incorporados sempre em elementos <figure>. Aí que entra os dois pontos da pergunta que podem ser respondidas diretamente pois uma complementa a outra.

Refere-se ao fato de que se o elemento incorporado pelo <figure> for movido para outro local, ele não irá comprometer o significado da página.
Por isso é importante analisar qual o comportamento que esse objeto (imagem, vídeo, trecho de código, etc) tem sobre a página.

Mas se o objeto for parte importante do conteúdo daquela página, ela não pode ser incorporada dentro de uma <figure>:

1)Alguns exemplos de quando não utilizar figure:

  • Quando for uma logotipo;
  • Quando for um ícone de navegação;
  • Objetos pertencentes a um artigo;

Esses exemplos são importantes para o conteúdo da página e a posição deles também, portanto não use o figure em objetos desse tipo.

2)Exemplo de quando utilizar figure:

Considere: - Uma página de consultoria possui uma <section> de serviços e dentro dela há vários cards com uma breve descrição e um ícone representando o serviço. Nesse caso é viável usar o <figure>. Veja abaixo uma coluna contendo 1 card informando um serviço e a utilização do figure:

<div class="col-lg-4">
    <div class="text-center">
        <div class="ser_icon">
            <figure>
                <img src="images/01.png" width="20%">
            </figure>
        </div>
        <div class="service-content">
            <h5 class="font-weight-bold">Título do Serviço</h5>
            <p class="">
             Uma breve descrição do serviço vai aqui
             </p>
        </div>
    </div>
</div>


Pois bem, espero ter ajudado um pouco. Qualquer dúvida estamos aí.

1
  • 1
    Mt bom jovem! Obg pelas explicações. []s
    – Sam
    Commented 19/02/2019 às 17:09
5

Uma observação é que o elemento figure está bem próximo do que temos no mundo impresso, e que é normatizado pela ABNT em textos acadêmicos etc.

Você já deve ter lido em artigos "Veja figura 1 (a figura não está aqui, mas faz parte do contexto)"

Veja o que diz a documentação oficial W3C (já traduzido)

O elemento pode, assim, ser usado para anotar ilustrações, diagramas, fotos, listagens de código, etc., que são referenciados a partir do conteúdo principal do documento, mas que poderiam, sem afetar o fluxo do documento, ser movidos desse conteúdo principal. , por exemplo, para o lado da página, para páginas dedicadas ou para um apêndice.

Fonte: https://www.w3.org/TR/2011/WD-html5-author-20110809/the-figure-element.html

Nesse artigo o @Maujor conta um pouco sobre a história da tab figure, e cita o seguinte

O elemento <figure> destina-se a marcar uma unidade de conteúdo e opcionalmente uma legenda para o conteúdo que se constituí em uma peça isolada do fluxo principal do documento e pode ser retirada daquele fluxo sem alterar o significado do documento.

Fonte: http://www.maujor.com/blog/2010/04/13/os-elementos-figure-e-figcaption-da-html5/


Veja por exemplo esse parágrafo

" O apêndice do adulto é um longo divertículo, medindo aproximadamente 10 cm de comprimento, com origem na parede póstero-medial do ceco, cerca de 3 cm abaixo da válvula íleo-cecal (Figura 1). "

Em outra página, outra parte do texto, ou em um apêndice vc vai encontrar a Figura 1

Figura 1 na verdade é um link para uma imagem que mesmo estando relacionada ao conteúdo por algum motivo não está exatamente no fluxo do conteúdo, podendo estar em um apêndice...

inserir a descrição da imagem aqui

Veja aqui o modelo original desse text + image
http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-39842007000300012#fig1


Resumindo

O que se entende pela tag figure é que ela é independente do fluxo do conteúdo, não tem posição fixa no fluxo do conteúdo. Acredito que na maioria dos casos a posição dela pode variar de acordo com o template, escolhas tipográficas ou mesmo de usabilidade para facilitar a leitura e não quebrar o texto em telas pequenas. Pode ser até uma questão de arquitetura da informação na página.


Informações a parte

Para quem gosta de história... A tag <FIG>

Nos primórdios, antes da tag <figure> já existia a tag <FIG>, como vc pode ver nessa documentação oficial. https://www.w3.org/MarkUp/html3/figures.html

The FIG element improves on the IMG element by allowing authors to use markup for the description text. The content model allows authors to include headers, which is appropriate when the headers are part of the image data. It also allows graphical hypertext links to be specified in the markup and interpreted by the user agent rather than the server.

Traduzindo "O elemento FIG melhora o elemento IMG, permitindo que os autores usem marcação para o texto de descrição. O modelo de conteúdo permite que os autores incluam cabeçalhos, o que é apropriado quando os cabeçalhos são parte dos dados da imagem. Ele também permite que os links gráficos de hipertexto sejam especificados na marcação e interpretados pelo user agent em vez do servidor."

Veja que em 1993 eles já se preocupavam com semântica e acessibilidade.

Ela era usada dessa forma

<FIG ALIGN=FLOAT SRC="cat.gif">
<CAPTION>"Not curried fish again!"<CAPTION>
A cartoon of a scrawny cat with its tongue out saying ACK!
</FIG>
<P>The text in the following paragraphs will flow around the figure
if there is enough room. The browser is free to position the caption at
the top, bottom or sides of the figure.

Output
inserir a descrição da imagem aqui

Fonte da imagem: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_35.html

5
  • 1
    Boa hugocss! :D
    – Sam
    Commented 19/02/2019 às 18:26
  • As duas respostas ficaram bem esclarecedoras, mas achei que a sua me deu uma melhor noção da parada.
    – Sam
    Commented 19/02/2019 às 18:27
  • 1
    @Sam valeu mestre! Ficou um pouco mais "acadêmico" rss. Eu fiquei curioso pq eu acho que bem antigamente no HTML4 tinha uma tag chamada <fig> mas não tenho certeza, não achei nada a respeito
    – hugocsl
    Commented 19/02/2019 às 18:30
  • 1
    Achei uma referencia na w3.org, artigo de 1993 <FIG ALIGN=FLOAT SRC="cat.gif">: w3.org/MarkUp/HTMLPlus/htmlplus_35.html haha doidera!
    – hugocsl
    Commented 19/02/2019 às 18:32
  • 1
    Vigi! Ainda nem tinha internet no Brasil.
    – Sam
    Commented 19/02/2019 às 18:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .