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
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
Fonte da imagem: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_35.html