Bild und Bildunterschrift zusammenbringen - <figure> und <figcaption>

HTML bietet mit dem Element <figure> nun einen Container, um diesen mit Fotos, Bildern, Abbildungen und Grafiken zu füllen und mit einer Bildunterschrift zu versehen. Früher wurde dafür ein allgemeines DIV-Element verwendet, was nie optimal war.

Der Aufbau der HTML-Befehle <figure> und <figcaption>:

<figure>
  <img src="html-seminar-logo.jpg" width="400" height="140" 
      alt="HTML-Seminar Logo">
  <figcaption>Logo HTML-Seminar</figcaption>
</figure>

Die Anweisung <figure> umschließt Bilder (meistens über den <img-Befehl integriert) und es kann eine Bildunterschrift über <figcaption> mitgegeben werden. Die Bildunterschrift ist optional und kann genutzt werden.

Das Aussehen vom Standard ist nicht wirklich berauschend. Der obige Code ergibt folgendes Aussehen:

Bildunterschrift <figcaption>

In der Bildunterschrift kann beliebiger HTML-Code genutzt werden. Es können auch Links verwendet werden.

Die Bildunterschrift kann über CSS mit einem passenden Design versehen werden.

Vorteile von <figure> und <figcaption>

Über die Nutzung von <figure> und <figcaption> bekommen wir eine Verbindung von Bild und Bildunterschrift. Bisher gab es dafür keinen expliziten HTML-Befehl und es wurden allgemeine HTML-Befehle wie DIV-Bereiche genutzt.

Der <figure>-Befehl kann mehrere grafische Ausgaben umschließen. Das englische Wort „figure“ hat die Bedeutung von „Abbildung“. Wir sind also nicht nur auf Bilder festgelegt, sondern können auch Grafiken z.B. über SVG darüber ausgeben.

Design über CSS

Sehr einfach können wir über CSS ansprechendes Design umsetzen. Im folgenden Beispiel wurden die Bilder mit Bildunterschriften wie alte Fotos von Sofortbildkameras gestaltet. Der breitere Streifen am unteren Bereich wurde gerne früher beschriftet. Technisch wurde dieser Bereich für die Chemikalien benötigt, die für die Sofortentwicklung notwendig waren.

Weitere Beispiel für die Anwendung von <figure> und <figcaption> und die Nutzung für cooles Design folgt in verschiedenen CSS-Kapiteln:

• Bilder und Design: Ausgabe mit Rahmen wie bei alter Sofortbildkamera