HTML <figure> Tag

The figure tag defines content that is independent of the main flow of the document. This means that if you want to insert an image or video clip into your page without disrupting its overall flow, you can do so using the figure tag. The figure element also supports captions, as well as other attributes such as width and height.

When using the figure tag, there are two main pieces of code you will need to include in order to make it work correctly.

First, you will need to specify which element(s) you are trying to embed within your page by putting those elements between the opening and closing figure tags (as seen in example 1 below).

Then, you will need to add a figcaption attribute for any caption text that might accompany this element (example 2). By adding these two pieces of code together, you can easily embed an image or video clip into your page without disrupting its overall flow.

<figure>
	<img src="imageURL" />
</figure>

<figure>
   <img src="image.jpg" alt="Image Description">
   <figcaption>This is an image caption</figcaption>
</figure>

<figure>
   <code>
        let jsVariable = "Hello Code;
        console.log(jsVariable);
   </code>
   <figcaption>JavaScript test</figcaption>
</figure>

The primary benefit of using the figure tag is that it makes it easier to embed multimedia elements into a webpage without disrupting its overall flow or design.

Because images and videos can be inserted into separate figures on the same page without disruption each one can be individually styled and positioned on-screen; this makes creating complex designs with multiple media elements much easier than before!

Instead of having to write additional code for each individual media element, all figures on a page can be written with one piece of code.