HTML <figure> tag

Definitie en gebruik

<figure> de tag zelfstandige inhoud zoals illustraties, grafieken, foto's, code-lijsten enz. regelt.

Hoewel <figure> De inhoud van het element is gerelateerd aan de hoofdinhoud, maar zijn positie is onafhankelijk van de hoofdinhoudsstroming. Als het element wordt verwijderd, zou het geen invloed moeten hebben op de documentstroom.

Tip:Gebruik <figcaption> element Voor <figure> Elementen toevoegen met een titel.

Zie ook:

HTML DOM referentiehandleiding:Figure object

Voorbeeld

Voorbeeld 1

Gebruik de <figure> element om foto's in de document te markeren, gebruik de <figcaption> element om de titel van de foto te definiéren:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Beeld 1 - De Trulli in de Puglia-regio van Italié.</figcaption>
</figure>

Try it yourself

Voorbeeld 2

Gebruik CSS om de stijl van <figure> en <figcaption> te instellen:

<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="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Beeld 1 - De Trulli in de Puglia-regio van Italié.</figcaption>
</figure>
</body>
</html>

Try it yourself

Global attributes

<figure> The tag also supports Global attributes in HTML.

event attributes

<figure> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <figure> Element:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Try it yourself

Browser support

The numbers in the table indicate the first browser version to fully support the element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Note: The <figure> tag is a new tag in HTML 5.