HTML-Tipps für Webentwickler

figure und figcaption für mehr als Bilder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
07:48
  Lesezeichen setzen

Transkript

Zuzeiten von HTML 401 gab es noch hitzige Diskussionen, wie Bilder mit Beschriftungen richtig auszuzeichnen sind. Glücklicherweise beantwortet HTML 5 die Frage mit den neu eingeführten Elementen "figure" und "figcaption". Bei ihrer Verwendung gibt es einige Besonderheiten und auch eine Änderung mit HTML 5.1. Sie sehen ein klassisches Beispiel für die Verwendung von "figure" und "figcaption". Ich nehme das um ein Bild einzufügen und mit einer Beschriftung zu ergänzen, im Browser sieht das dann so aus, wir haben unser Bild und unsere Beschriftung. Im Beispiel könnte ich die Beschriftung natürlich auch oberhalb des Bildes platzieren, dann wird sie auch entsprechend angezeigt. Da ist jetzt meine Beschriftung. Es gibt eine Änderung in HTML 5.1, wenn wir uns ansehen, was wir in HTML 5 finden, beim Figcaption-Element, so steht hier ganz deutlich, dass das Figcaption-Element, also die Beschriftung-Beschreibung das erste oder letzte Kind eines Figure-Elementes sein soll, und in HTML 5.1 hingegen ist es weniger streng, da muss das Figcaption-Element nur ein Nachfahrer "unverständlich" des Figure-Elementes sein. Was heißt das konkret? Das bedeutet, ich könnte hier jetzt auch noch irgendeinen weiteren Text oder irgendetwas haben, sofern es denn sinnvoll ist, und ich könnte auch um das Figcaption-Element beispielsweise einen DIV machen, wenn das sinnvoll ist und ich das irgendwie brauche und es wäre dann trotzdem noch korrekt in HTML 5.1, hingegen in HTML 5 war das noch nicht erlaubt. Wann verwendet man das Figure-Element und wofür? Da gibt es eine schöne Beschreibung auch in der Spezifikation von W3C. Es soll verwendet werden für Inhalte, die self-contained sind, das heißt, die in sich abgeschlossen sind, in dem Sinne, wie auch ein Absatz in sich abgeschlossen ist. Es muss sich aber nicht um ein Element handeln das vollkommen unabhängig ist. Das Ganze soll aber auch funktionieren, wenn beispielsweise das Figure-Element auf der Seite weiter nach unten wandert. Und es würde jetzt nicht passen für ein Bild, das Teil des Absatzes ist, also wenn ein Bild Teil eines Absatzes ist, dann sollen Sie nicht "figure" verwenden. Das ist das Eine, das Andere ist, dass man bei "figure" immer sofort an Bilder denkt, dabei kann man es für wesentlich mehr Informationen verwenden. Sehen wir uns ein paar Beispiele an. Sie können das Figure-Element nehmen beispielsweise für ein Gedicht und dann ist die Beschreibung typischerweise natürlich der Gedicht-Titel mit dem Autor und der Gedicht-Titel wird innerhalb von "cite" geschrieben. Das hier ist übrigens ein Nonsens-Gedicht, übersetzt wurde es so heißen, wie "Verdaustig war's, und glaße Wieben" et cetera. Also man kann "figure" beispielsweise auch für Gedichte nehmen, man kann es auch verwenden für Codefragmente. Wir sehen uns dieses Beispiel einmal an, und dann ist das hier meine Beschriftung und das ist das, was ich damit auszeichne. Außerdem kann man es auch benutzen für Tabellen, hier ist meine Tabelle und da ist die Beschriftung und das ganze steht in einem Figure-Element. Sie können, wenn es dann auch passt, Figure-Elemente ineinander verschachteln, wie dieses Beispiel von WC zeigt, da geht es um ein Schloss durch die verschiedene Jahrhunderte und das sind dann immer einzelne Figure-Elemente, wo die Bilder mit Beschriftung gezeigt werden, und das Ganze steht in einem umfassenden Figure-Element mit einer Beschriftung. Dieses Beispiel könnte man aber auch anders schreiben ohne Verschachtelung und dann würde man die Beschriftung beispielsweise innerhalb eines Title-Attributs unterbringen. Figure-Elemente sind automatisch eingerückt, dafür ist die Margin-Eigenschaft verantwortlich, das heißt, wenn Sie die Einrückung nicht haben wollen, müssen Sie beim Figure-Element den Wert für Margin ändern. Das sieht man auch sehr schön daran, dass bei Normalize die Angabe für Figure folgendermaßen lautet: Nehme ich Margin 1em 40em, das heißt, hier wird zur Vereinheitlichung über alle Browsergrenzen hinweg der Margin gesetzt und umgekehrt heißt es auch, wenn Sie diese Einrückung nicht haben wollen oder anders haben wollen, dann definieren Sie für das Figure-Element Ihren eigenen Abstand mit Margin. Und noch ein weiterer Punkt zur Formatierung, Sie können das Figcaption-Element, ja, unterhalb, wenn Sie ein Bild verwenden, des Bildes schreiben oder oberhalb, Sie können dann per CSS das trotzdem anders anzeigen lassen. Ich habe ein Beispiel, wo das Figcaption-Element nach dem Bild kommt, ich möchte aber etwa bei einem bestimmten Viewport eine andere Anzeige, dann kann ich das per CSS steuern, dafür mache ich das Figure-Element zu einer Tabelle, "Display:Table", und dann kann ich das Figcaption-Element mit "Display:Table caption" nach oben ziehen. Wenn wir uns das ansehen, dann ist die Beschriftung oberhalb des Bildes. Ich kann auch den umgekehrten Weg gehen: Angenommen im Code ist die Beschriftung oberhalb des Bildes, dann kann ich mit "Display:tablefooter-group" sie nach unten schieben. Jetzt ist die Beschriftung unten. Und wie gesagt, das kann praktisch sein, wenn man bei verschiedenen Viewport-Größen eine unterschiedliche Darstellung möchte, aber der HTML-Code natürlich gleich bleibt. In diesem Film haben wir uns mit bekannten und unbekannteren Features von "figure" und "figcaption" beschäftigt, zum einen, was man oft nicht berücksichtigt ist, dass man "figure" auch für andere Elemente als Bilder verwenden kann, beispielsweise auch für Gedichte. Die Neuerung in HTML 5.1 ist, dass die Position von "figcaption" nicht festgelegt ist. Das heißt, Sie können das auch in einem tiefer verschachtelten Element angeben und außerdem haben Sie gesehen, wie man beispielsweise über "Display:Table" die Position von "figcaption" verändert.