HTML <figure>-Element
Das <figure>-Element wird verwendet, um eigenständige Inhalte zu kennzeichnen. Das Element kann Diagramme, Bilder, Illustrationen, Codebeispiele und so weiter enthalten.
Das <figure>-Element ist eines der HTML5-Elemente.
Der Inhalt des <figure>-Elements steht in Bezug zum Hauptflussinhalt. Er wird jedoch als autonome Einheit wahrgenommen.
Um dem Inhalt des <figure>-Elements eine Bildunterschrift oder Erklärung hinzuzufügen, verwenden wir das <figcaption>-Element. Das <figcaption>-Element wird in das <figure>-Element eingebettet und als erstes oder letztes Kindelement platziert. Wenn <figcaption> das erste verschachtelte Element ist, wird der Inhalt oberhalb des Bildes angezeigt.
Syntax
Das <figure>-Element wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<figure>) und dem schließenden (</figure>) Tag geschrieben.
Beispiel für das HTML <figure>-Element:
HTML <figure>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Ergebnis
Der Unterschied zwischen den <figure>- und <aside>-Elementen
Beide Elemente haben ein ähnliches Verhalten. Es gibt jedoch einige Unterschiede. Insbesondere dient das <figure>-Element Inhalten, die direkt mit dem Hauptinhalt verknüpft sind. Das <aside>-Element wird für „indirekt“ verknüpfte Inhalte verwendet. Es bietet Infografiken, Zitate oder Diagramme zu bestimmten Inhalten.
Attribute
Das <figure>-Element unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Welche Funktion hat das <figure>-Element in HTML?