HTML <figure> és <figcaption>
Képek és illusztrációk struktúrált megjelenítése
A képek, grafikák és diagramok nemcsak díszítik a weboldalakat, hanem vizuálisan támogatják a tartalmat is. A HTML figure és figcaption címkék segítségével az ilyen elemeket strukturáltan és érthetően jeleníthetjük meg. De pontosan hogyan működnek? Nézzük meg! 🚀
📌 Mi az a <figure> és hogyan használjuk?
A <figure> egy olyan HTML-címke, amely önálló egységként kezeli a képeket, grafikákat, diagramokat vagy egyéb vizuális tartalmakat. Segítségével könnyebben formázható és értelmezhető lesz a weboldalon belül.
✅ A <figure> egy különálló, jól meghatározható tartalmi blokkot képez
✅ A benne lévő kép, diagram vagy ábra egyértelműen a szöveghez kapcsolódik
✅ Nem csak képekhez használható, hanem például diagramokhoz vagy kódrészletekhez is
Példa – Kép beillesztése <figure> segítségével
<figure>
<img src=”naplemente.jpg” alt=”Egy gyönyörű naplemente a tengerparton”>
</figure>
Ebben az esetben a kép egy strukturált egységet alkot, de még nincs hozzá magyarázat.
📌 Mi az a <figcaption> és miért fontos?
A <figcaption> címke egy képaláírást (caption) ad a <figure> blokkhoz. Ez lehetőséget biztosít a kép kontextusának magyarázatára, ami különösen fontos például cikkekben, blogbejegyzésekben vagy oktatási anyagokban.
Példa – Képaláírás hozzáadása
<figure>
<img src=”naplemente.jpg” alt=”Egy gyönyörű naplemente a tengerparton”>
<figcaption>Naplemente a Balaton partján egy nyári estén.</figcaption>
</figure>
💡 Miért jó ez?
✔ Segít a felhasználóknak megérteni a kép jelentését
✔ Jobb felhasználói élményt biztosít
✔ A keresőmotorok számára is értékesebb tartalmat ad
📊 Használati lehetőségek
A <figure> és <figcaption> nemcsak képeknél hasznos, hanem grafikonoknál vagy idézeteknél is alkalmazható.
Példa – diagram magyarázattal
<figure>
<img src=”statisztikak.png” alt=”Eladási statisztikák”>
<figcaption>Az elmúlt év havi eladási statisztikái</figcaption>
</figure>
Példa – Idézet egy forrásmegjelöléssel
<figure>
<blockquote>
„A tudás hatalom.”
</blockquote>
<figcaption>– Francis Bacon</figcaption>
</figure>
🎯 Összegzés
A <figure> és <figcaption> segít a képek, diagramok és egyéb vizuális tartalmak strukturált és keresőbarát megjelenítésében.
✅ A <figure> blokkba csoportosítja a vizuális elemeket
✅ A <figcaption> címkével értelmezhető leírást adhatunk hozzá
✅ SEO és akadálymentesség szempontjából is előnyös
📌 További olvasnivaló:
🔗 HTML <img> címke – Képek beillesztése
🔗 HTML <section> és <article> – Tartalmi blokkok létrehozása