Skip to content
Marcos Caceres edited this page Mar 28, 2026 · 11 revisions

<figure>

Standard HTML <figure> elements are enhanced by ReSpec with automatic numbering, self-links, and cross-reference support.

Usage

<figure id="flowchart">
  <img src="flowchart.svg" alt="Water flows from bucket A to bucket B" />
  <figcaption>The water flows from bucket A to bucket B.</figcaption>
</figure>

<p>As shown in <a href="#flowchart"></a>, the flow is one-directional.</p>

The empty <a href="#flowchart"> auto-fills with "Figure N" text.

Notes

  • Figures are numbered automatically ("Figure 1", "Figure 2", …)
  • A <figcaption> is required — figures without one generate a ReSpec warning
  • Empty links to a figure's id auto-populate with "Figure N"
  • A self-link (§) is generated so readers can link directly to a specific figure
  • Generate a list of all figures with tof (Table of Figures)
  • The <figcaption> should be a proper caption describing the figure, not just a title

Guides

Configuration options

W3C Configuration options

Linting rules

Internal properties

Handled by ReSpec for you.

Special <section> IDs

HTML elements

Custom Elements

HTML attributes

CSS Classes

Special properties

Clone this wiki locally