Csoportosító elemek

<figure>, <figcaption> – Kép, ábra, kép/ábra aláírása

Mire használjuk?

A <figure> ábrák, fényképek, illusztrációk, diagramok jelölésére szolgál. A megjelenítendő tartalom lehet valamilyen kép, melyet az <img> tag segítségével lehet a <figure> tagbe illeszteni. Viszont lehet multimédiaelem is, vagy akár forráskód is. Az utóbbi esetben a <code> taget lehet használni. Opcionálisan tartalmazhat egy ábrához tartozó feliratot. Ezt a feliratot a <figcaption> tagek közé kell tenni. Utóbbi nem kötelező tag, de ha van, akkor csak egy lehet belőle és a <figure> tag első vagy utolsó gyereke lehet.

<figure> tag paraméterei: globális attribútumok

<figcaption> tag paraméterei: globális attribútumok

Forráskód elhelyezése

for i:=1 to n do
 begin
   write('Kérem a tömb ',i,'. elemét: ');
   readLn(t[i]);
 end;

<figure>
 <pre>
  <code>
   for i:=1 to n do
    begin
      write('Kérem a tömb ',i,'. elemét: ');
      readLn(t[i]);
    end;
  </code>
 </pre>
</figure>

Vissza a tartalomjegyzékhez

Forráskód elhelyezése ábra aláírással (az aláírás az ábra felett)

for i:=1 to n do
 begin
   write('Kérem a tömb ',i,'. elemét: ');
   readLn(t[i]);
 end;

<figure>
  <figcaption>Ciklussal bekérjük a tömb elemeit</figcaption>
 <pre><code>for i:=1 to n do
 begin
   write('Kérem a tömb ',i,'. elemét: ');
   readLn(t[i]);
 end;</code>
</pre>
</figure>

Láthatjuk, hogy a képaláírás most az ábra felett jelent meg. Ez azért van, mert a <figcaption> elemet közvetlenül a <figure> tag után írtuk, így annak első gyereke lett. Ha az aláírást az ábra alatt akarjuk megjeleníteni, akkor az alábbi példában látható módon, a <figure> tag lezárása előtt kell közvetlenül elhelyeznünk.

Vissza a tartalomjegyzékhez

Forráskód elhelyezése ábra aláírással (az aláírás az ábra alatt)

for i:=1 to n do
 begin
   write('Kérem a tömb ',i,'. elemét: ');
   readLn(t[i]);
 end;

<figure>
<pre><code>for i:=1 to n do
 begin
   write('Kérem a tömb ',i,'. elemét: ');
   readLn(t[i]);
 end;</code>
</pre>
  <figcaption>Ciklussal bekérjük a tömb elemeit</figcaption>
</figure>

Vissza a tartalomjegyzékhez

Versrészlet elhelyezése a <figure> és <figcaption> tagekkel

<figure>
 <q cite="http://www.citatum.hu/szerzo/Csokonai_Vitez_Mihaly">
     A hatalmas szerelemnek<br />
    Megemésztő tüze bánt.<br />
    Te lehetsz írja sebemnek,<br />
    Gyönyörű kis tulipánt!
 </q>
 <figcaption>Csokonai Vitéz Mihály: <cite>Tartózkodó kérelem (részlet)</cite></figcaption> 
</figure>

Vissza a tartalomjegyzékhez