Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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:

Beispiel für figure und figcaption

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.

Nachbildung von alten Fotos von Sofortbildkamera mit unterem Beschriftungsrand
Nachbildung von alten Fotos von Sofortbildkamera mit unterem Beschriftungsrand

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe