Figures and captions in HTML

A figure ties an image, chart or code sample to its caption.

<figure>
  <img src="/img/tokens.png" alt="Tokens typed per minute"
       width="600" height="300">
  <figcaption>
    Tokens per minute across the Python basics tour.
  </figcaption>
</figure>
<figure>
  <pre><code>print("hello")</code></pre>
  <figcaption>The smallest program worth typing.</figcaption>
</figure>

How it works

1. figcaption is the caption and may come first or last.
2. The whole figure can be moved without losing the caption.
3. It works for tables and code blocks as well as images.

The run, in numbers

Lines

11

Characters to type

295

Tokens

60

Three-star pace

65 tpm

At the three-star pace of 65 tokens a minute, this run takes about 55 seconds.

Type this snippet

Step 7 of 7 in Links & images, step 22 of 28 in Document structure.

← Previous Next →