Chapter Text
The figure tag's name is slightly misleading. If you're like me, you'd assume that a figure is like an image, and the figcpation (figure caption) adds information to that image, and this whole thing should have been covered in Chapter 11: Images.
We'd both be wrong.
In HTML, per MDN, a figure is "self-contained content, potentially with an optional caption... The figure, its caption, and its contents are referenced as a single unit." Self-contained content is just that: self-contained. If you were writing a technical paper and you referenced figure 8, it wouldn't matter where exactly figure 8 appeared with respect to the text, it would be independent from the text, a self-contained element. Similarly, in an academic paper, figure 8 might be a photograph, a schematic, a graph or chart, etc. (it could be a table, but by convention, tables are called tables.)
So a HTML figure can be any or all of these: an image, a table, a media embed, plain text or formatted text. Anything you can code in HTML can go inside the figure tag. The important thing - conceptually, not for formatting - is that it that content makes sense as a self-contained unit. The examples at MDN include images, poems, and tables but we aren't limited to that.
Once we've decided on the HTML figure's content, we can then add an associated caption that will always be paired with the HTML figure. This caption can be a simple as a line of text (no paragraph formatting needed), include basic on-line formatting or links, or even be multiple paragraphs! This caption doesn't have a set location with respect to the HTML figure. It's position in relation to the content of the figure - before, after, or amid - will determine where the caption displays when the HTML figure is displayed in a brower.
For this chapter only I will be linking to MDN (developer.mozilla.org) instead of w3schools. I had to learn figure and figcaption to write this section and MDN was a much clearer resource for explaining how these tags worked.
| Format | Tag | Attribute | What it Does | |
|---|---|---|---|---|
| figure | figure | Defines a section of HTML (similar to<div>) as a "figure." |
||
| figure caption | figcaption | This code is only used nested within |
||
Sample Code (Image vs Figure):
<img width="30%" src="https://media.www.ao3.icu/ao3/tutorial_styling_works/bend.jpg" alt="icon of rural pond reflecting the sky" /> <figure> <img width="30%" src="https://media.www.ao3.icu/ao3/tutorial_styling_works/bend.jpg" alt="icon of rural pond reflecting the sky" /> </figure>
Result (Image vs Figure):
The top picture is just using <img>, and the second puts <img> inside of <figure>. On the archive, using figure seems to slightly inset the content (similar to blockquote), and it also allows us to pair that "figure" with a caption:
Sample Code (Figure & FigCaption):
<figure> <img width="30%" src="https://media.www.ao3.icu/ao3/tutorial_styling_works/bend.jpg" alt="icon of rural pond reflecting the sky" /> <figcaption><a href="https://media.www.ao3.icu/ao3/tutorial_styling_works/bend.jpg">icon of rural pond reflecting the sky</a> </figure>
Result (Figure & FigCaption):
This adds a figcaption to the figure. The caption can be formatted using the in-line formatting tags, and have links added with the anchor/a tag. Building on Chapter 11: Images, using figcaption with a link can replace the implied caption that we coded with an actual caption. This makes our works more accessible.
Note Only the first figcaption within a figure will be read, and it can be above, below, or within the contents of the figure.
Sample Code (Figure & FigCaption Amid Contents):
<figure>
<audio>
<source src="https://ia803406.us.archive.org/15/items/sonnet_116_librivox/sonnet_116_shakespeare_ezwa.mp3">
<source src="https://archive.org/details/sonnet_116_librivox/sonnet_116_shakespeare_jb.mp3">
</audio>
<figcaption><cite>Sonnet 116, by William Shakespeare</figcaption>
<p>Let me not to the marriage of true minds<br>
Admit impediments; love is not love<br>
Which alters when it alteration finds,<br>
Or bends with the remover to remove.<br>
O no, it is an ever-fixèd mark<br>
That looks on tempests and is never shaken;<br>
It is the star to every wand'ring bark<br>
Whose worth's unknown, although his height be taken.<br>
Love's not time's fool, though rosy lips and cheeks<br>
Within his bending sickle's compass come.<br>
Love alters not with his brief hours and weeks,<br>
But bears it out even to the edge of doom:<br>
If this be error and upon me proved,<br>
I never writ, nor no man ever loved.<br>
</figure>
Result (Figure & FigCaption Amid Contents):
Let me not to the marriage of true minds
Admit impediments; love is not love
Which alters when it alteration finds,
Or bends with the remover to remove.
O no, it is an ever-fixèd mark
That looks on tempests and is never shaken;
It is the star to every wand'ring bark
Whose worth's unknown, although his height be taken.
Love's not time's fool, though rosy lips and cheeks
Within his bending sickle's compass come.
Love alters not with his brief hours and weeks,
But bears it out even to the edge of doom:
If this be error and upon me proved,
I never writ, nor no man ever loved.
In a more dynamic page; such as where the individual HTML elements and content re-order itself based on the size of the display used (desktop vs tablet vs mobile), the use of figure and figcaption to maintain the link between a figure and it's description is going to be more necessary than it is on the archive. Right now, it's a bit of a curiosity here.