figure und figcaption
Umschließen Sie Bilder mit semantischen figure-Containern und Bildunterschriften.
figure und figcaption ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist figure?
Das <figure>-Element kennzeichnet eigenständige Inhalte, auf die im Haupttext verwiesen wird:
- Bilder mit Bildunterschriften
- Codebeispiele
- Diagramme, Schaubilder und Illustrationen
- Zitate
Das entscheidende Merkmal: Wenn der Inhalt aus dem Hauptfluss entfernt wird, bleibt der umgebende Text dennoch verständlich.
figure mit figcaption
<figcaption> stellt eine Bildunterschrift für die figure bereit:
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->Position von figcaption
<figcaption> kann vor oder nach dem Hauptinhalt platziert werden:
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>Barrierefreiheit: alt und figcaption
Verstehen Sie den Unterschied:
alt– beschreibt den Bildinhalt für Screenreader und bei fehlenden Bildernfigcaption– sichtbare Bildunterschrift mit Kontext, Quelle oder Erklärung
Sie erfüllen unterschiedliche Zwecke und sollten nicht denselben Inhalt wiederholen.
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>Codebeispiel in figure
Verwenden Sie <figure> für beschriftete Codebeispiele:
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>Zitat in figure
<figure> eignet sich hervorragend zusammen mit <blockquote>:
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>Mehrere Bilder in figure
Eine figure kann mehrere zusammengehörige Bilder enthalten:
<figure>
<img src="before.jpg" alt="Garden before renovation">
<img src="after.jpg" alt="Garden after renovation">
<figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>figure oder div
Wann sollten Sie <figure> und wann <div> verwenden:
- Verwenden Sie
<figure>, wenn der Inhalt in einen Anhang verschoben werden könnte - Verwenden Sie
<figure>, wenn Sie eine sichtbare Bildunterschrift benötigen - Verwenden Sie
<div>für Layout-Container oder nicht eigenständige Bildergruppen
Figures im Text verknüpfen
Verweisen Sie im Haupttext auf Figures:
<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>
<figure id="fig1">
<img src="growth.png" alt="Revenue growth chart 2020-2024">
<figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>figure ist für Bilder nicht erforderlich
Sie müssen nicht jedes Bild in <figure> einschließen:
<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">
<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
<img src="diagram.svg" alt="System architecture diagram">
<figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>figure und figcaption gestalten
Häufig verwendetes CSS für Figures:
figure {
margin: 2rem auto;
max-width: 100%;
text-align: center;
}
figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
font-style: italic;
}Schnelltest
Was ist der entscheidende Unterschied zwischen Alternativtext und figcaption?
Zusammenfassung: figure und figcaption
Die wichtigsten Punkte zu Figures:
<figure>– eigenständiger Inhalt, auf den im Haupttext verwiesen wird<figcaption>– sichtbare Bildunterschrift, erstes oder letztes Kindelement von figurealt– unsichtbare Beschreibung für Screenreaderfigcaption– sichtbarer Kontext für alle Nutzerinnen und Nutzer- Geeignet für Bilder, Code, Zitate und Diagramme
Häufig gestellte Fragen
Ist die Lektion „figure und figcaption“ kostenlos?
Ja — der vollständige Text von „figure und figcaption“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „figure und figcaption“?
Umschließen Sie Bilder mit semantischen figure-Containern und Bildunterschriften. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „figure und figcaption“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das img-Element: src, alt, width und height
- Responsive Bilder mit srcset und sizes
- Das picture-Element für Art Direction
- figure und figcaption