<figure>: Das Figure mit optionalem Caption-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <figure> HTML-Element stellt eigenständige Inhalte dar, möglicherweise mit einer optionalen Beschriftung, die mit dem <figcaption>-Element angegeben wird. Die Figur, ihre Beschriftung und ihre Inhalte werden als eine Einheit betrachtet.

Probieren Sie es aus

Attribute

Dieses Element enthält nur die globalen Attribute.

Anwendungshinweise

  • In der Regel ist ein <figure> ein Bild, eine Illustration, ein Diagramm, ein Code-Schnipsel usw., das im Hauptfluss eines Dokuments referenziert wird, aber verschoben werden kann, ohne den Hauptfluss zu beeinträchtigen.
  • Eine Beschriftung kann dem <figure>-Element zugeordnet werden, indem ein <figcaption> innerhalb von <figure> eingefügt wird (als erstes oder letztes Kind-Element). Das erste <figcaption>-Element im <figure> wird als die Beschriftung der Figur angezeigt.
  • Das <figcaption> bietet den zugänglichen Namen für das übergeordnete <figure>.

Beispiele

Bilder

html
<!-- Just an image -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>

Ergebnis

Code-Schnipsel

html
<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

Ergebnis

Zitate

html
<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>

Ergebnis

Gedichte

html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, greifbarer Inhalt.
Erlaubte Inhalte Ein <figcaption>-Element, gefolgt von Flussinhalt; oder Flussinhalt gefolgt von einem <figcaption>-Element; oder Flussinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind zwingend.
Zulässige Eltern Jedes Element, das Flussinhalt akzeptiert.
Implizite ARIA-Rolle figure
Zulässige ARIA-Rollen Ohne figcaption-Nachfolger: beliebige, ansonsten keine zulässigen Rollen
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-figure-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
figure

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch