Skip to content

<figure>

The <figure> element wraps self-contained media content. Semanticus removes the default margin and styles <figcaption> with muted text color.

Basic Usage

live preview
editable html
<figure>
  <img src="https://picsum.photos/800/400" alt="A scenic placeholder image" />
  <figcaption>Figure 1 — A placeholder image demonstrating the figure element.</figcaption>
</figure>

With Code

live preview
editable html
<figure>
  <pre><code>console.log("Hello, World!");</code></pre>
  <figcaption>A code snippet inside a figure element.</figcaption>
</figure>