HTML <figure> etikett

Definition och användning

<figure> taggen reglerar innehåll som är självständigt, såsom illustrationer, diagram, bilder, kodlistor och liknande.

Trots att <figure> Innehållet i elementet är relaterat till huvudinnehållet, men dess plats är oberoende av huvudinnehållet, om det tas bort bör det inte påverka dokumentflödet.

Tips:Använd <figcaption>-elementet För <figure> Lägg till en rubrik till elementet.

Se också:

HTML DOM Referenshandbok:Figure-objekt

Exempel

Exempel 1

Använd <figure>-elementet för att markera bilder i dokumentet, använd <figcaption>-elementet för att definiera bildens titel:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figur 1 - Trulli i Pugliaregionen i Italien.</figcaption>
</figure>

Prova själv

Exempel 2

Använd CSS för att ställa in stilen för <figure> och <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>Figur 1 - Trulli i Pugliaregionen i Italien.</figcaption>
</figure>
</body>
</html>

Prova själv

Globala egenskaper

<figure> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<figure> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <figure> Element:

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

Prova själv

Webbläsarstöd

Numrerna i tabellen anger den första versionen av webbläsaren som helt stöder detta element.

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

Kommentar: <figure> etiketten är en ny etikett i HTML 5.