Quick Tip: The Right Way to Use Figure & Figcaption Elements

[author_more]

The figure element represents a self-contained unit of content. This means that if you were to move the element either further down a document, or to the end of the document, it would not affect the document’s meaning.

Therefore, we also need to remember that not every image is a figure.

Multiple Images in figure

You can put multiple img tags in a figure if they are related in the context of your document.

[code language="html"]
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
</figure>
[/code]

Other Elements Can Be Used With figure

The figure element is not limited to images either. You can use it for things such as:

• code blocks,
• videos,
• audio clips, or
• advertisements.

Here is an example of figure being used for a block of code:

[code language="html"]
<figure>
<pre>
<code>
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
</code>
</pre>
</figure>
[/code]

Continue reading %Quick Tip: The Right Way to Use Figure & Figcaption Elements%

by Georgie Luhur via SitePoint