Figure or aside: Figuring out the difference

Not unexpectedly, the goal of the semantic element figure is to flag illustrations, diagrams, and other content blocks that are referred to from the main content of the document. The author usually makes the referral in the text with a simple “See Exhibit 1″ or “See Illustration B,” or something along those lines. Content that could fall into this category include code samples, charts, graphs, and photos. The HTML spec even uses a poem as an example of a figure.

See this example figure (which itself could be flagged by a figure element on this blog page – whoa, meta!):

<p>The third quarter results were disappointing. For details, see Figure 2.</p>
...
<figure>
<img src="sales_Q3_FY12.jpeg" alt="Third quarter sales results">
<figcaption>Figure 2: Q3 sales results</figcaption>
</figure>

(The new figcaption element in the example is optional and self-explanatory.)

According to the HTML5 spec, one property of the figure element is that it “could, without affecting the flow of the document, be moved away from [the] primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.”

Wait a minute, stuff on the side of a page that doesn’t affect the flow of the document sounds a lot like an aside element. How is a figure different?

Figure content has some relation to the main content, but so can aside content (at least in a tangential way). What then? The thing that seems to make the figure stand out is the reference made from the main content — the “See Figure 1″ part. The author wants to direct the reader to a figure, but not necessarily to an aside. The content in an aside is for users to discover on their own.