DONT ADD ANYTHING HERE!

  1. The figure element represents self-contained content, potentially with an optional caption, which is specified using the figcaption element
  2. The figure, its caption, and its contents are referenced as a single unit
  3. A caption can be associated with the figure element by inserting a figcaption inside it (as the first or the last child) (MDN)
  4. The first figcaption element child of the element, if any, represents the caption of the figure element's contents
  5. If there is no child figcaption element, then there is no caption
  6. The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix

Example (Apples)

A Picture of Apples (webp format)
Picture of Apples

HTML

<figure>

    <figcaption>A Picture of Apples (webp format)</figcaption>

    <img src="../images/apples.webp" alt="Picture of Apples">

</figure>

Example (Quote)

Edsger Dijkstra:
If debugging is the process of removing software bugs, then programming must be the process of putting them in.

HTML

<figure>

    <figcaption>
        <b>Edsger Dijkstra:</b>
    </figcaption>

    <blockquote>
        If debugging is the process of removing software bugs, 
        then programming must be the process of putting 
        them in
    </blockquote>

</figure>

Example (Poem)

Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire.

Venus and Adonis, by William Shakespeare

HTML

<figure>

    <p class="poem">
        Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
        green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
        yet no footing seen: Love is a spirit all compact of fire, Not gross to
        sink, but light, and will aspire.
    </p>

    <figcaption>
        <cite>Venus and Adonis</cite>, by William Shakespeare
    </figcaption>
                
    </figure>

CSS

    .poem {
        white-space: pre;
    }

Example (Code, W3C)

In listing 4 we see the primary core interface API declaration.

Listing 4. The primary core interface API declaration.
interface PrimaryCore {
   boolean verifyDataLine();
   void sendData(in sequence<byte> data);
   void initSelfDestruct();
  }

HTML (W3C)


<p>
    In 
        <a href="#l4">listing 4</a> 

    we see the primary core interface API declaration.
</p>

<figure id="l4">

     <figcaption>
          Listing 4. The primary core interface API declaration.
    </figcaption>

    <pre>
        <code>
            interface PrimaryCore {
            boolean verifyDataLine();
            void sendData(in sequence<byte> data);
            void initSelfDestruct();
            }
        </code>
    </pre>

</figure>

Notes

Mnemonic

References

MDN: figure and figcaption
W3C: figure element
W3C: figcaption