html5 - Qual é a relação da tag <figure> com o fluxo principal no HTML? - Stack Overflow em Português
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:
"sua posição é independente do fluxo principal"
"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)?
editada 19/02/19 às 18:54
perguntada 19/02/19 às 16:06
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...
Veja aqui o modelo original desse text + image
http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-39842007000300012#fig1
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!
<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.
Fonte da imagem: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_35.html
editada 19/02/19 às 18:43
respondida 19/02/19 às 18:23
Boa hugocss! :D
19/02/19 às 18:26
As duas respostas ficaram bem esclarecedoras, mas achei que a sua me deu uma melhor noção da parada.
19/02/19 às 18:27
@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
19/02/19 às 18:30
Achei uma referencia na w3.org, artigo de 1993 <FIG ALIGN=FLOAT SRC="cat.gif">: w3.org/MarkUp/HTMLPlus/htmlplus_35.html haha doidera!
19/02/19 às 18:32
Vigi! Ainda nem tinha internet no Brasil.
19/02/19 às 18:33
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: