🎓 A1Learner
🔍

HTML Figure and Footer

The figure element groups a picture with its caption, a short line that explains the picture. The footer element holds the closing content of a page or a section.

A picture with a caption

The figure element groups the picture and its caption. The figcaption element holds the caption text.

<figure>
  <img src="sunflower.jpg" alt="A sunflower in bloom">
  <figcaption>A sunflower in the school garden.</figcaption>
</figure>

Caption first

The caption can sit before the picture too. It must stay inside the figure element.

<figure>
  <figcaption>A sunflower in the school garden.</figcaption>
  <img src="sunflower.jpg" alt="A sunflower in bloom">
</figure>

A page footer

The footer element closes the page. It holds the opening hours here.

<footer>
  <p>Open daily from 7am. Find us on Market Street.</p>
</footer>

A footer inside an article

A footer element can close one article. It names the writer here.

<article>
  <h2>Sunflowers in bloom</h2>
  <p>The fence row is in full flower.</p>
  <footer>
    <p>Written by Ana Rao.</p>
  </footer>
</article>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>School Garden</title>
</head>
<body>
<header>
  <h1>School Garden</h1>
</header>
<main>
  <article>
    <h2>Sunflowers in bloom</h2>
    <figure>
      <img src="sunflower.jpg" alt="A sunflower in bloom">
      <figcaption>A sunflower in the school garden.</figcaption>
    </figure>
    <footer>
      <p>Written by Ana Rao.</p>
    </footer>
  </article>
</main>
<footer>
  <p>City Bakery is open daily from 7am.</p>
</footer>
</body>
</html>

Key points

  • figure: a picture grouped with its caption
  • figcaption: the caption element inside a figure
  • footer: the closing content of a page or a section
  • A figcaption element sits inside its figure element

In this example, the figure element groups the sunflower picture with its caption. The caption text sits in a figcaption element. The footer inside the article names the writer. The footer at the end of the body closes the whole page.

Note

One page can hold several footer elements.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does a figcaption element hold?