i'm a newbie and self-learned developer. I have a confusion about the explaination of Figure tag on W3school:
* - The figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
- While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
*
The Bold Part made no sense in my head after i read this. Could someone please help me to clarify ?. What does 'mainflow', 'position' and 'removed' mean here? Does 'removed' mean physically removing it from HTML structure. Thank you so much and sorry if this is amateur question.
Here is the most-related link about my concern i found on google but it doesn't help:
what is the usage of HTML5 figure with img
<body>
<img src="" alt="" style="width: 10%;">
<p>Trees and Sunset</p>
<figure>
<img src="" alt="" width="10%">
<figcaption>Lorem, ipsum dolor.</figcaption>
</figure>
</body>
The main flow consists of three elements: img, p, and figure. Content of the figure element is the second img element and the figcaption element, so those are related to the main flow by their parent element(figure). About position, the figure element will have a margin on the left. At last, if you remove the related elements, which are the child elements of the figure element, the main flow won't change. Order will stay the same as img>p>figure and there will be a space instead of removed elements.