Tag HTML <figure>

Definicja i użycie

<figure> tag określa zawartość wewnętrzną, taką jak ilustracje, wykresy, zdjęcia, listy kodów itp.

Chociaż <figure> Zawartość elementu jest związana z głównym treściem, ale jego pozycja jest niezależna od głównego strumienia treści, usunięcie go nie powinno wpłynąć na przepływ dokumentu.

Wskazówka:Użyj elementu <figcaption> Dla <figure> Dodaj tytuł do elementu.

Zobacz również:

Przeglądarka HTML DOM:Obiekt Figure

Przykład

Przykład 1

Użyj elementu <figure> do oznaczenia obrazów w dokumencie, użyj elementu <figcaption> do zdefiniowania tytułu obrazu:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  Obraz 1 - Trulli w regionie Apulii we Włoszech.
</figure>

Spróbuj sam

Przykład 2

Użyj CSS do ustawienia stylu dla <figure> i <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%">
  Obraz 1 - Trulli w regionie Apulii we Włoszech.
</figure>
</body>
</html>

Spróbuj sam

Globalne atrybuty

<figure> Tag wspiera również Globalne atrybuty HTML.

Atrybuty zdarzeń

<figure> Tag wspiera również Atrybuty zdarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek wyświetli wartości domyślne poniżej: <figure> Element:

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

Spróbuj sam

Wsparcie przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten element.

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

Komentarz: Tag <figure> to nowy tag w HTML 5.