HTML <figcaption> -elementti

Määrittely ja käyttö

<figcaption> Tunniste: <figure> Elementti määrittelee otsikon.

<figcaption> Elementti voidaan sijoittaa <figure> Elementin ensimmäisen tai viimeisen lapsen sijainti.

Katso myös:

HTML DOM -viittauskirja:Figcaption-objekti

Esimerkki

Esimerkki 1

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

<figure>
  <img src="tulip.jpg" alt="Kukka" style="width:300px">
  <figcaption>Kuva 1 - Kukka, krokos, monivuotinen yrtti.</figcaption>
</figure>

Kokeile itse

Esimerkki 2

Aseta <figure> ja <figcaption> -tyyliä CSS:n avulla:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  pADDING: 4px;
  margin: auto;
}
figcaption {
  background-color: musta;
  color: valkoinen;
  font-style: kursiivinen;
  pADDING: 2px;
  tekstiasento: keskelle;
}
</style>
</head>
</body>
<figure>
  <img src="tulip.jpg" alt="Kukka" style="width:300px">
  <figcaption>Kuva 1 - Kukka, krokos, monivuotinen yrtti.</figcaption>
</figure>
</body>
</html>

Kokeile itse

Globaalit attribuutit

<figcaption> Tagi tukee myös HTML:n globaalit attribuutit.

tapahtumavälitteitä

<figcaption> Tagi tukee myös HTML:n tapahtumavälitteet.

Oletusarvoiset CSS-asetukset

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

figcaption {
  display: block;
}

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen elementtiä selaimen version.

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