What is the relation of the <figure> tag to the main stream in HTML?

Question

Reading about the tag <figure> I found this text in MDN documentation:

The HTML Element <figure> represents the independent content, often with a caption (<figcaption>), and is usually referred to as a single unit. While it is related to the Main flow, its position is independent of the main flow. Normally, this is an image, an illustration, a diagram, an excerpt code or a schema that is referenced in the main text, but which can be moved to another page or to an appendix without affecting the main flow.

The application of the element itself I understood, as it shows this question made here on the site, but did not understand the following passages of the above text:

1. "its position is independent of the main flow"
2. "but that can be moved to another page or to an appendix without affecting the main flow"

What do these quotations listed above mean? You can give example(s)?

Answer 1

As stated in the question, <figure> has its application inside some visual objects in the document HTML, not to mention its semantic value.
However, these features should not always be incorporated into elements <figure>. That is where the two points of the question enter that can be answered directly because one complements the other.

Refers to the fact that if the element incorporated by the <figure> is moved to another location, it will not compromise the meaning of the page.
Therefore it is important to analyze what behavior this object (image, video, code snippet, etc) has on the page.

But if the object is an important part of the content of that page, it cannot be embedded within a <figure>:

1)Some examples of when not to use figure:

• When it’s a logo;
• When you are a navigation icon;
• Objects belonging to an article;

These examples are important for the page content and the position also, so do not use the figure on such objects.

2)Example of when to use figure:

Consider: - A consulting page has a <section> of services and within it there are several cards with a brief description and an icon representing the service. In this case it is possible to use the <figure>. See below a column containing 1 card informing a service and the use of the 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>

Well, I hope I helped a little. Any doubt we are there.

Answer 2

One observation is that the element figure is very close to what we have in the printed world, and which is standardized by ABNT in academic texts etc.

You must have read in articles "See Figure 1 (the figure is not here, but it is part of the context)"

See what the official documentation says W3C (already translated)

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc., which are referenced from the main content of the document, but which could, without affecting the document flow, be moved from that main content. for example to the side of the page, for dedicated pages or an appendix.

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

In this article @Maujor tells a little bit about the history of the tab figure, and quotes the following

The element <figure> is intended to mark a unit of content and optionally a caption for the content consisting of a piece isolated from the main stream of the document and can be removed from that stream without changing the meaning of the document.

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

---

See for example this paragraph

" The adult appendix is a long diverticulum, measuring approximately 10 cm in length, originating from the posteromedial wall of the cecum, about 3 cm below the ileocaecal valve (Figure 1). "

On another page, another part of the text, or in an appendix vc will find the Figure 1

Figure 1 is actually a link to an image that even though it is related to the content for some reason is not exactly in the content stream, it may be in an appendix...

See here the original model of this text + image
http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-39842007000300012#fig1

---

In short

What is meant by the tag figure is that it is independent of the flow of content, has no fixed position in the flow of content. I believe that in most cases its position may vary according to the template, typographical or even usability choices to facilitate reading and not break the text on small screens. It may even be a matter of information architecture on the page.

---

_{Information to the party}

For those who like history... The tag <FIG>

In the early days, before the tag <figure> the tag already existed <FIG>, as you can see in this official documentation. 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.

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

Note that in 1993 they were already worried about semantics and accessibility.

She was used that way

<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

Image source: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_35.html