figure en figcaption
Wikkel afbeeldingen in semantische figure-containers met bijschriften.
figure en figcaption is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Wat is figure?
Het element <figure> markeert op zichzelf staande inhoud waarnaar vanuit de hoofdtekst wordt verwezen:
- Afbeeldingen met bijschriften
- Codevoorbeelden
- Diagrammen, grafieken en illustraties
- Citaten
Het belangrijkste kenmerk: als je het element uit de hoofdstroom verwijdert, blijft de omringende tekst nog steeds begrijpelijk.
figure met figcaption
<figcaption> geeft een bijschrift voor de figure:
<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 -->Positie van figcaption
<figcaption> kan voor of na de hoofdinhoud worden geplaatst:
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>Toegankelijkheid: alt versus figcaption
Begrijp het verschil:
alt— beschrijft de inhoud van de afbeelding voor schermlezers en bij niet-geladen afbeeldingenfigcaption— zichtbaar bijschrift met context, bron of uitleg
Ze hebben verschillende doelen en mogen elkaar niet dupliceren.
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>Codevoorbeeld in figure
Gebruik <figure> voor gelabelde codevoorbeelden:
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>Citaat in figure
<figure> werkt uitstekend met <blockquote>:
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>Meerdere afbeeldingen in figure
Een figure kan meerdere gerelateerde afbeeldingen bevatten:
<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 versus div
Wanneer gebruik je <figure> en wanneer <div>:
- Gebruik
<figure>als de inhoud naar een bijlage zou kunnen worden verplaatst - Gebruik
<figure>als je een zichtbaar bijschrift nodig hebt - Gebruik
<div>voor lay-outcontainers of groepen afbeeldingen die niet op zichzelf staan
Naar figures verwijzen in tekst
Verwijs vanuit de hoofdtekst naar 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 is niet vereist voor afbeeldingen
Je hoeft niet elke afbeelding in <figure> te plaatsen:
<!-- 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 en figcaption opmaken
Veelgebruikte CSS voor 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;
}Korte controle
Wat is het belangrijkste verschil tussen alt-tekst en figcaption?
Samenvatting: figure en figcaption
De basis van figure:
<figure>— op zichzelf staande inhoud waarnaar vanuit de hoofdtekst wordt verwezen<figcaption>— zichtbaar bijschrift, als eerste of laatste kind van figurealt— onzichtbare beschrijving voor schermlezersfigcaption— zichtbare context voor alle gebruikers- Geschikt voor afbeeldingen, code, citaten en grafieken
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “figure en figcaption” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “figure en figcaption”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “figure en figcaption”?
Wikkel afbeeldingen in semantische figure-containers met bijschriften. Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “figure en figcaption”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het img-element: src, alt, width en height
- Responsieve afbeeldingen met srcset en sizes
- Het picture-element voor art direction
- figure en figcaption