Abbildungen

„Abbildungen“ ist eigentlich ein ungenügender Ausdruck für dieses Gruppierungselement. Es handelt sich um beschriftete Inhalte, die abgesetzt vom Fließtext sind und diesen ergänzen. Das können beschriftete Grafiken (Abbildungen) sein, aber beispielsweise auch beschriftete Code-Listings, beschriftete Multimedia-Elemente wie eingebettete Videos, beschriftete Tabellen oder beschriftete Inhalte in eingebetteten Frames .

Beispiel

<p>In der Pfalz gibt es zahlreiche Burgen.</p>
<figure>
  <figcaption>Burg Trifels bei Annweiler:</figcaption>
  <img src="Trifels.jpg" alt="Abbildung der Burg Trifels" width="335" height="448">
</figure>
<p>Und im Internet gibt es zahlreiche Listings.</p>
<figure>
  <pre>
     function blockError() {
        return true;
     }
     window.onerror = blockError;
  </pre>
  <figcaption><b>Listing 25:</b> Fehlermeldungen unterdrücken</figcaption>
</figure>

Erläuterung

Eine „Abbildung“ wird durch <figure>…</figure> markiert. Der so definierte Bereich kann, aber muss keine Beschriftung enthalten. Wenn er eine Beschriftung enthält, wird diese durch <figcaption>…</figcaption> ausgezeichnet. Das figcaption-Element muss in diesem Fall entweder ganz am Anfang (wie im ersten Fall des obigen Beispiels) oder ganz am Ende (wie oben im zweiten Fall) des figure-Bereichs notiert werden.

Der übrige Inhalt eines figure-Elements kann aus Text und anderen HTML-Elementen bestehen. Bestimmte Arten von Inhalt sind nicht vorgeschrieben. Typisch sind Verwendungen wie im obigen Beispiel: in Verbindung mit Grafiken (im Beispiel das img-Element) oder mit Code-Listings (im Beispiel das pre-Element).

Auch das figcaption-Element kann neben Text andere HTML-Elemente enthalten, jedoch keine Gruppierungselemente und keine Elemente für Webseiten-Bereiche.

Weitere Hinweise

Die Elemente figure und figcaption wurden erst mit HTML5 eingeführt. Die Browser-Unterstützung dieser Elemente läuft erst an.

Das img-Element aus dem obigen Beispiel wird im Buchabschnitt Pixelgrafik-Referenzen beschrieben, und das pre-Element im nachfolgenden Abschnitt über präformatierte Bereiche.

Verwenden Sie CSS bzw. CSS-Eigenschaften, um figure-Bereiche und die zugehörige Beschriftung zu gestalten.

Referenzinformationen

HTML5 XHTML5 MSIE9.0 FFOX CHROME SAF OPERA11.0

Zum Thema Browser-Unterstützung dieses Elements siehe auch:
Arbeiten mit Browsern unbekannten Elementen

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License