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ássalForrá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