Oft möchte man zu einem Bild eine kleine Bildunterschrift anzeigen - wie in einer Zeitung oder einem Buch. Dafür gibt es zwei Elemente, die zusammengehören: <figure> und <figcaption>.

Der Aufbau

<figure>
  <img src="bilder/training.jpg" alt="Die Mannschaft beim Training auf dem Sportplatz">
  <figcaption>Unser Training am letzten Dienstag</figcaption>
</figure>

<figure> umschließt das Bild und seine Beschriftung als zusammengehörige Einheit. <figcaption> enthält den Beschriftungstext und kann vor oder nach dem Bild stehen - meistens steht sie danach.

Warum nicht einfach ein

darunter?

Man könnte auch einfach schreiben: <img ...><p>Beschriftung</p>. Der Unterschied: Mit <figure>/<figcaption> sagst du dem Browser und Screenreadern ausdrücklich "dieses Bild und dieser Text gehören fest zusammen", nicht nur "hier steht zufällig ein Bild, und danach zufällig ein Absatz". Das ist ein Beispiel für semantisches HTML - Elemente, die eine echte Bedeutung transportieren, statt nur ein Aussehen. Wir werden in einem späteren Block noch mehr davon kennenlernen.

Mehrere Bilder in einer figure

<figure> kann auch mehrere Bilder mit einer gemeinsamen Beschriftung enthalten:

<figure>
  <img src="bilder/spiel.jpg" alt="Torschuss von Finn">
  <img src="bilder/mannschaft.jpg" alt="Die Mannschaft nach dem Sieg">
  <figcaption>Zwei Momente aus unserem letzten Spiel</figcaption>
</figure>

Finns erstes Foto mit Beschriftung

Füge ein beschriftetes Foto zu deiner Webseite hinzu:

<h2 id="fotos">Fotos</h2>
<figure>
  <img src="bilder/training.jpg" alt="Die Mannschaft beim Training auf dem Sportplatz" width="500">
  <figcaption>Unser Training am letzten Dienstag</figcaption>
</figure>