<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 eigenständigen Inhalt, möglicherweise mit einer optionalen Beschriftung, die mit dem <figcaption>-Element angegeben wird. Die Abbildung, ihre Beschriftung und ihre Inhalte werden als eine einzige 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 enthält nur die globalen Attribute.

Nutzungshinweise

  • Üblicherweise ist ein <figure> ein Bild, eine Illustration, ein Diagramm oder ein Code-Snippet usw., das im Hauptfluss eines Dokuments referenziert wird, aber ohne Beeinträchtigung des Hauptflusses in einen anderen Teil des Dokuments oder in einen Anhang verschoben werden kann.
  • Eine Beschriftung kann mit dem <figure>-Element verknüpft werden, indem ein <figcaption> darin eingefügt wird (als erstes oder letztes Kind). Das erste <figcaption>-Element, das in der Figur gefunden wird, wird als die Beschriftung der Figur dargestellt.
  • Die <figcaption> bietet den zugänglichen Namen für das übergeordnete <figure>-Element.

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() { let txt = `Browser CodeName: ${navigator.appCodeName};\n`; txt += `Browser Name: ${navigator.appName};\n`; txt += `Browser Version: ${navigator.appVersion};\n`; txt += `Cookies Enabled: ${navigator.cookieEnabled};\n`; txt += `Platform: ${navigator.platform};\n`; 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> Bid me discourse, I will enchant thine ear,<br /> Or like a fairy trip upon the green,<br /> Or, like a nymph, with long dishevelled hair,<br /> Dance on the sands, and yet no footing seen:<br /> Love is a spirit all compact of fire,<br /> Not gross to sink, but light, and will aspire.<br /> </p> <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption> </figure>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, fühlbarer 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 obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert.
Implizite ARIA-Rolle figure
Erlaubte ARIA-Rollen Ohne figcaption-Nachfahre: jede, andernfalls keine erlaubten Rollen
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-figure-element

Browser-Kompatibilität

Siehe auch