HTML5 - Tárolóelem ábrákhoz

HTML5 Speciális tárolóelem ábrákhoz

Név	Angol eredete	Hatás	Jellemzők
<figure>	Figure	Páros címke, amelybe több ábra is beágyazható.	Általános ; Események
<figcaption>	figure caption	Páros címke. Az ábrá(k)hoz tartozó felírat (cím, képaláírás, leírás, magyarázat) adható meg segítségével.	Általános ; Események

A következő böngészők támogatják:

A <figcaption> közvetlen <figure> címke után vagy a </figure> előtt adható meg.

Hasonlókép használjuk, mint a nyomtatott anyagokban (pl. a könyvek és folyóiratok) a képek, diagramok, vagy példakódok képaláírásainál megszoktuk.

A div vagy aside elemekkel hasonló módon kezeljük.

Ha a fő tartalomhoz tartozó fontos információt adunk közre, akkor a <figure > , ha kevésbé fontos vagy a tartalomhoz csupán érintőlegesen kapcsolódó információkat, akkor az < aside > elemet használjuk.

Példa 1:

Egy kép képaláírással és forrásmegjelöléssel.

Forráskód


<figure>
  <blockquote>
     <img src="i5_processzor_300.jpg" alt="Az Intel P5 processzora">
  </blockquote>
  <figcaption>
     1. ábra Intel P5 processzora....  
     <br>
     <cite>
        <a href="https://www.intel.com"> Intel Corporation</a>
     </cite>
   </figcaption>
</figure>

Eredmény*

Példa 2:

Több kép képaláírással

Forráskód


<figure style="text-align:center;">
  <img src="i5_processzor_180.jpg" alt="Az Intel P5 processzora">
  <img src="i5_processzor_huto_180.jpg" alt="Processzor hűtő">
  <img src="memoria_modul_180.jpg" alt="Memória modulok">
  <figcaption>
     A kiválasztott alaplaphoz még egy processzort, egy processzor 
     hűtőventilátort és memória modulokat is kell vásárolni.
  </figcaption>
</figure>

Eredmény*

Példa 3:

Kód képaláírással.
Megj. az entitások használatánál a példakód plusz szóközöket tartalmaz.

Forráskód


<figure> 
     <figcaption>
        Ha HTML forráskódot jelenítünk meg, akkor a
        <code> < és ></code> karakterek helyett 
        entitásukat használjuk:
     </figcaption>
     <p><code>
      & lt;a rel="license" 
         href="https://creativecommons.org/licenses/by-nc-sa/2.5/hu/"
      & gt;
        Creative Commons licenc
      & lt;/a& gt; 
  </code></p>
</figure>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető:
html5_figure_1.html ; html5_figure_2.html ; html5_figure_3.html