The Right Way to Use

Figure & Figcaption

Elements

Figure & Figcaption

The <figure> and <figcaption> elements are two semantic elements that are often used together. If you haven’t looked at the spec, had a chance to use them in your projects, or have no idea how, here are some tips on how to use them correctly.

The <figure> and <figcaption>  element is commonly used for images:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Figure

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

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, like illustrations, diagrams, photos, code listings, etc.

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

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

Multi Images in <figure>

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</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:

Other Element can be used with  <figure>

<figure role="group">
  <figcaption>The Pulpit Rock</figcaption>
  <figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
  </figure>
  <figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.2 - A view of the pulpit rock in Norway.</figcaption>
  </figure>
</figure>

You can nest a figure inside another figure if it makes sense to. Here, an ARIA role attribute has been added to improve semantics.

Nesting <figure> Inside Another <figure>

<figure>
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

The <figcaption> element represents a caption or legend for a figure.

Not every figure needs a figcaption.

However, when using <figcaption>, it should ideally be the first or last element within a figure block:

Correct Usage of <figcaption>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

OR

Correct Usage of <figcaption>

<figure>
  <img src="dogs.jpg" alt="Group photo of dogs">
  <figcaption>
    <h2>Fig.1</h2>
    <p>A view of the pulpit rock in Norway.</p>
    <p>A rock in Norway.</p>
  </figcaption>
</figure>

If you need to add more semantics to an image, you can use elements such as h1 and p.

You Can Use Flow Elements in <figcaption> Too

http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/

End