HTML <figure> -elementti

Määrittely ja käyttö

<figure> tagi määrittelee sisällön, joka on itseensä sisältyvä, kuten kuvat, kaaviot, valokuvat, koodilistaat ja niin edelleen.

Vaikka <figure> Elementin sisältö liittyy pääsisältöön, mutta sen sijainti on riippumaton pääsisällöstä. Jos sitä poistetaan, se ei vaikuta dokumentin virrassa.

Vinkki:Käytä: <figcaption>-elementti Tarkoitus: <figure> Lisää elementille otsikko.

Katso myös:

HTML DOM -viittausopas:Figure-objekti

Esimerkki

Esimerkki 1

Merkkaa dokumentin kuvia <figure>-elementillä ja määritä kuvien otsikot <figcaption>-elementillä:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Kuva 1 - Italian Pugliassa sijaitsevat Trulli.</figcaption>
</figure>

Kokeile itse

Esimerkki 2

Aseta <figure> ja <figcaption> -tyylin CSS:llä:

<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>Kuva 1 - Italian Pugliassa sijaitsevat Trulli.</figcaption>
</figure>
</body>
</html>

Kokeile itse

Globaalit ominaisuudet

<figure> Tunnisteet tukevat myös HTML -globaalit ominaisuudet.

tapahtumavaiheet

<figure> Tunnisteet tukevat myös HTML -tapahtumavaiheet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <figure> Elementti:

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee elementtiä täysin.

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

Huomautus: <figure> -merkki on uusi HTML 5 -merkki.