HTML <figure> etiket

Definition og brug

<figure> etiketten definerer indhold, der er selvindklædt, såsom illustrationer, diagrammer, billeder, kodeoptegnelser osv.

Selvom <figure> Indholdet af elementet er relateret til hovedindholdet, men dens placering er uafhængig af hovedindholdet, og hvis det slettes, bør det ikke påvirke dokumentstrømmen.

Tip:Brug <figcaption>-elementet For <figure> Tilføj titel til element.

Se også:

HTML DOM Reference Manual:Figure-objekt

Eksempel

Eksempel 1

Brug <figure>-elementet til at markere billeder i dokumentet, og brug <figcaption>-elementet til at definere billedets titel:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Billede 1 - Trulli i Puglia-regionen, Italien.</figcaption>
</figure>

Prøv det selv

Eksempel 2

Brug CSS til at sætte stilen på <figure> og <figcaption>:

<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>Billede 1 - Trulli i Puglia-regionen, Italien.</figcaption>
</figure>
</body>
</html>

Prøv det selv

Globale egenskaber

<figure> Etiketten understøtter også HTMLs globale egenskaber.

event egenskaber

<figure> Etiketten understøtter også HTMLs event egenskaber.

Standard CSS indstillinger

De fleste browsere viser som standard følgende værdier <figure> Element:

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

Prøv det selv

Browser Support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter dette element.

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

Kommentar: <figure> etiket er en ny etiket i HTML 5.