HTML <figure> Tag

Definition und Verwendung

<figure> Der Tag definiert inhaltlich abgeschlossene Inhalte, wie Illustrationen, Diagramme, Fotos, Code-Listen usw.

Obwohl <figure> Der Inhalt des Elements ist mit dem Hauptinhalt verbunden, aber seine Position ist unabhängig vom Hauptinhaltstrom. Wenn es gelöscht wird, sollte es den Dokumentstrom nicht beeinflussen.

Hinweis:Verwenden Sie <figcaption>-Element Für <figure> Fügen Sie dem Element einen Titel hinzu.

Siehe auch:

HTML DOM Referenzhandbuch:Figure-Objekt

Beispiel

Beispiel 1

Verwenden Sie das <figure>-Element, um Bilder im Dokument zu kennzeichnen, und das <figcaption>-Element, um den Titel des Bildes zu definieren:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaptitle>Abbildung 1 - Die Trulli in der Region Puglia, Italien.</figcaptitle>
</figure>

Try It Yourself

Beispiel 2

Stellen Sie mit CSS die Stile für <figure> und <figcaption> ein:

<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%">
  <figcaptitle>Abbildung 1 - Die Trulli in der Region Puglia, Italien.</figcaptitle>
</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 that fully supports 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.