Attributen
Dit element bevat alleen de globale attributen.
Gebruiksnotities
- Meestal is een
<figure>een afbeelding, illustratie, diagram, codefragment, enzovoort, waarnaar verwezen wordt in de hoofdstroom van een document, maar dat naar een ander deel van het document of naar een bijlage verplaatst kan worden zonder de hoofdstroom te beïnvloeden. - Een onderschrift kan gekoppeld worden aan het
<figure>-element door een<figcaption>erin op te nemen (als eerste of laatste kind). Het eerste<figcaption>-element dat in de figuur gevonden wordt, wordt gepresenteerd als het onderschrift van de figuur. - Het
<figcaption>-element levert de accessible name voor de bovenliggende<figure>.
Voorbeelden
Afbeeldingen
HTML
<!-- Just an image -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful logo." />
</figure>
<!-- Image with a caption -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful logo." />
<figcaption>Logo</figcaption>
</figure>Resultaat
Resultaat in de browser
Codefragmenten
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>Resultaat
Resultaat in de browser
Citaten
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>Resultaat
Resultaat in de browser
Gedichten
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>Resultaat
Resultaat in de browser
Technische samenvatting
| Content categories | Flow content, palpable content. |
|---|---|
| Toegestane inhoud |
Een <figcaption>-element, gevolgd door
flow content; of flow content gevolgd door een
<figcaption>-element; of flow content.
|
| Weglaten van tag | Geen, zowel de begin- als eindtag zijn verplicht. |
| Toegestane ouders | Elk element dat flow content accepteert. |
| Impliciete ARIA-rol | figure |
| Toegestane ARIA-rollen | Zonder een figcaption-afstammeling: any, anders geen toegestane rollen |
| DOM-interface | HTMLElement |