<figure>: Das Figure-Element mit optionaler Beschriftung

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 repräsentiert in sich geschlossene Inhalte, die möglicherweise mit einer optionalen Beschriftung versehen sind, welche mit dem <figcaption>-Element angegeben wird. Die Figur, ihre Beschriftung und ihre Inhalte werden als eine Einheit betrachtet.

Probieren Sie es aus

<figure>
  <img
    src="/shared-assets/images/examples/elephant.jpg"
    alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

Attribute

Dieses Element beinhaltet nur die globalen Attribute.

Anwendungshinweise

Üblicherweise ist ein <figure> ein Bild, eine Illustration, ein Diagramm, ein Code-Snippet usw., das im Hauptverlauf eines Dokuments referenziert wird, aber verschoben werden kann, ohne den Hauptverlauf zu beeinflussen, z.B. in einen anderen Teil des Dokuments oder in einen Anhang.
Eine Beschriftung kann mit dem <figure>-Element verknüpft werden, indem innerhalb des Elements ein <figcaption> eingefügt wird (als erstes oder letztes Kind-Element). Das erste im <figure> gefundene <figcaption>-Element wird als Beschriftung der Figur angezeigt.
Das <figcaption> stellt den zugänglichen Namen für das übergeordnete <figure> bereit.

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-Snippets

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	Fließende Inhalte, greifbare Inhalte.
Erlaubte Inhalte	Ein `<figcaption>`-Element, gefolgt von fließenden Inhalten; oder fließende Inhalte, gefolgt von einem `<figcaption>`-Element; oder fließende Inhalte.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das fließende Inhalte akzeptiert.
Implizite ARIA-Rolle	figure
Erlaubte ARIA-Rollen	Ohne figcaption-Nachkomme: jede, sonst keine erlaubten Rollen
DOM-Schnittstelle	[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML # the-figure-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das <figcaption>-Element.