<figure> HTML-Element für eigenständige Inhalte mit optionalem Beschriftungselement
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <figure> HTML-Element repräsentiert eigenständige Inhalte, eventuell 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
<figure>
<img
src="/shared-assets/images/examples/elephant.jpg"
alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>
figure {
border: thin silver solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222222;
color: white;
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, ein Code-Schnipsel usw., das im Hauptfluss eines Dokuments referenziert wird, aber in einen anderen Teil des Dokuments oder in einen Anhang verschoben werden kann, ohne den Hauptfluss zu beeinflussen. - 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. - Das
<figcaption>bietet den barrierefreien 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-Schnipsel
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. |
|---|---|
| Erlaubter Inhalt |
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 verpflichtend. |
| Erlaubte Eltern | Jedes Element, das Flussinhalt akzeptiert. |
| Implizite ARIA-Rolle | Abbildung |
| Erlaubte ARIA-Rollen | Ohne figcaption-Nachkommen: beliebig, ansonsten keine erlaubten Rollen |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-figure-element |
Browser-Kompatibilität
Siehe auch
- Das
<figcaption>-Element.