HTML <figuur> Tag
Voorbeeld
Gebruik een <figure>-element om een foto in een document te markeren en een <figcaption>-element om een bijschrift voor de foto te definiëren:
<figure>
<img src="pic_trulli.jpg" alt="Trulli"
style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia,
Italy.</figcaption>
</figure>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <figure>tag specificeert op zichzelf staande inhoud, zoals illustraties, diagrammen, foto's, codelijsten, enz.
Hoewel de inhoud van het <figure>element gerelateerd is aan de hoofdstroom, is de positie ervan onafhankelijk van de hoofdstroom, en als het wordt verwijderd, mag dit geen invloed hebben op de stroom van het document.
Tip: Het element <figcaption> wordt gebruikt om een bijschrift voor het <figure>element toe te voegen.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
Algemene kenmerken
De <figure>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <figure>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik CSS om <figure> en <figcaption> op te maken:
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style:
italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1
- Trulli, Puglia, Italy</figcaption>
</figure>
</body>
</html>
Gerelateerde pagina's
HTML DOM-referentie: figuurobject
Standaard CSS-instellingen
De meeste browsers geven het <figure>element weer met de volgende standaardwaarden:
Voorbeeld
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}