Linkelés és fájlok betöltése

Linkelés és fájlok betöltése

Szerző: | 2025. febr. 23. | HTML

Linkelés és fájlok betöltése HTML-ben

 

Egy weboldal nemcsak HTML kódot tartalmaz, hanem gyakran kapcsolódó fájlokat is, például CSS stíluslapokat, JavaScript fájlokat, ikonokat és betűtípusokat. Ezeket külső fájlokként kell betölteni és összekapcsolni a HTML dokumentummal.

🔗 1️⃣ CSS fájlok betöltése a <link> címkével

A CSS fájlok segítenek a weboldal megjelenésének formázásában. Külső stíluslapokat a <link> címkével csatolhatunk a <head> szakaszba.

🔹 Példa: egy külső CSS fájl csatolása

<head>
        <link rel=”stylesheet” href=”styles.css”>
</head>

 

✅ rel="stylesheet" – Ez jelzi, hogy egy CSS fájlról van szó.
✅ href="styles.css" – Itt adjuk meg a CSS fájl elérési útvonalát.

📌 Fontos: A CSS fájlokat mindig a <head> szakaszban kell elhelyezni, hogy a böngésző a HTML renderelése előtt betöltse azokat.

📜 2️⃣ JavaScript fájlok betöltése a <script> címkével

A JavaScript fájlok interaktivitást adnak a weboldalhoz. Ezeket a <script> címkével tölthetjük be.

🔹 Alapvető JavaScript csatolás:

📌 Fontos: A CSS fájlokat mindig a <head> szakaszban kell elhelyezni, hogy a böngésző a HTML renderelése előtt betöltse azokat.

<script src=”script.js”></script>

 

✅ src="script.js" – A JavaScript fájl elérési útvonala.

📌 Hova kell tenni a <script> címkét?
1️⃣ Ha az <head> részbe tesszük, akkor a JavaScript a HTML betöltése előtt lefut.
2️⃣ Ha a </body> zárócímke előtt helyezzük el, akkor az oldal először betöltődik, majd a JavaScript aktiválódik, ami gyakran jobb felhasználói élményt eredményez.

🔹 Példa a helyes elhelyezésre:

<<body>
        <h1>Üdvözöllek!</h1>
        <script src=”script.js”></script>
</body>

🎨 3️⃣ Külső betűtípusok csatolása

A weboldalak egyedi betűtípusait Google Fonts vagy saját fájlok segítségével adhatjuk hozzá.

🔹 Google Fonts betöltése:

<head>
       <link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap”>
</head>

🔹 Saját betűtípus használata (CSS-ben megadva):

@font-face {
         font-family: ‘SajatBetutipus’;
         src: url(‘sajat-betutipus.woff2’) format(‘woff2’);
}

body {
          font-family: ‘SajatBetutipus’, sans-serif;
}

🎭 4️⃣ Weboldal ikonja (Favicon)

A favicon a böngésző fülén látható kis ikon. Ezt a <link> címkével lehet csatolni.

🔹 Favicon beállítása:

<head>
         <link rel=”icon” type=”image/png” href=”favicon.png”>
</head>

📌 Fontos:

  • A leggyakoribb formátum a .ico, .png vagy .svg
  • Ha nincs favicon, a böngésző hibát dobhat a konzolban.

💡 5️⃣ Hogyan lehet betölteni egy külső JavaScript könyvtárat?

🔹 Példa a Bootstrap csatolására (CDN-ről):

<head>
       <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
</head>
<body>
         <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>
</body>

✅ CDN (Content Delivery Network) használatával gyorsabb lesz az oldal betöltése.

📌 Összegzés

✅ A <link> címkével CSS fájlokat, betűtípusokat és favicont tölthetünk be.
✅ A <script> segítségével JavaScript fájlokat adhatunk hozzá.
✅ A betűtípusok és ikonok fontosak a design és a felhasználói élmény szempontjából.
✅ A külső könyvtárak (Bootstrap, jQuery) gyorsan és egyszerűen csatlakoztathatók CDN-ről.

🔗 Belső linkek kapcsolódó bejegyzésekhez

Ha további alapvető HTML elemekről szeretnél olvasni, nézd meg a következő cikkeket is:
📌 HTML struktúra és szerkezet – Hogyan épül fel egy HTML dokumentum?
📌 HTML <head> címkék – A keresőmotorok és a böngészők számára fontos információk.

Doctype és nyelvválasztás

Doctype és nyelvválasztás

Szerző: | 2025. febr. 22. | HTML

DOCTYPE és a HTML nyelvválasztás

 

Amikor egy új weboldalt készítünk, az első sor mindig a DOCTYPE deklaráció kell, hogy legyen. Ez meghatározza, hogy milyen HTML verziót használunk.

1️⃣ Mi az a <!DOCTYPE html> és miért van rá szükség?

A DOCTYPE (Document Type Declaration) nem egy HTML elem, hanem egy utasítás a böngésző számára, hogy modern HTML5 módban dolgozzon.
Ha nem adjuk meg, a böngésző kompatibilitási módba léphet, ami azt jelenti, hogy az oldal eltérően jelenhet meg a különböző böngészőkben.

👉 A HTML5-ben használt DOCTYPE nagyon egyszerű:

<!DOCTYPE html>

 

🔹 Régebbi verziókban bonyolultabb DOCTYPE deklarációk voltak, például:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN”
„http://www.w3.org/TR/html4/loose.dtd”>

 

De HTML5-ben már csak egy sor kell, mert a böngészők ezt automatikusan felismerik.

2️⃣ A <html> címke és a nyelv beállítása

A második sor egy HTML fájlban mindig a <html> címke, amely az egész weboldal szerkezetének alapját adja, és tartalmazza a fej- és törzsrészt.

A helyes szerkezet:

<!DOCTYPE html>
<html lang=”hu”>

👉 Miért kell megadni a lang attribútumot?

  • 🔍 Keresőoptimalizálás (SEO): A keresőmotorok jobban értik a tartalom nyelvét.
  • 🧑‍🦯 Hozzáférhetőség (Accessibility): A képernyőolvasók pontosan tudják, milyen nyelven kell felolvasni a szöveget.
  • 🌎 Többnyelvű oldalak támogatása: A böngészők a helyes karakterkódolást alkalmazzák.
    A lang attribútum az ISO 639-1 szabvány szerinti nyelvkódokat használja. Ha egy adott ország nyelvi változatát akarod megadni, akkor az ISO 3166-1 alpha-2 országkódokat is hozzáadhatod, például: en-US, en-GB, fr-CA, es-MX

Ha például egy angol weboldalt készítesz:

<html lang=”en”>

Ha pedig német nyelvűt:

<html lang=”de”>

3️⃣ Teljes HTML vázlat a DOCTYPE és a nyelvi beállítással

Egy teljes HTML fájl így kezdődik:

<!DOCTYPE html>
<html lang=”hu”>
<head>
       <meta charset=”UTF-8″>
       <title>Weboldal címe</title>
</head>
<body>
       <h1>Üdvözöllek a weboldalon!</h1>
</body>
</html>

🔹 Ebben már benne van: ✔ A modern HTML5 DOCTYPE
✔ A nyelvi beállítás (lang="hu")
✔ Az alapvető <head> és <body> szerkezet

🔍 Miért fontos a <!DOCTYPE html>?

✔ Segít a böngészőknek eldönteni, hogyan jelenítsék meg az oldalt.
✔ Kiküszöböli a kompatibilitási problémákat, biztosítva a modern webes szabványokat.
✔ Könnyen használható, nincs szükség további attribútumokra.

📌 Összegzés

✅ A <!DOCTYPE html> elengedhetetlen, hogy a böngésző modern módon dolgozzon.
✅ A <html lang="hu"> beállítás segíti a SEO-t és az akadálymentesítést.
✅ Ez a szerkezet minden HTML dokumentum alapja.

🔗 Belső linkek kapcsolódó bejegyzésekhez

Ha további alapvető HTML elemekről szeretnél olvasni, nézd meg a következő cikkeket is:
📌 HTML struktúra és szerkezet – Hogyan épül fel egy HTML dokumentum?
📌 HTML <head> címkék – A keresőmotorok és a böngészők számára fontos információk.

HTML űrlapok alapjai

HTML űrlapok alapjai

Szerző: | 2025. febr. 22. | HTML

HTML űrlapok alapjai

Hogyan hozzunk létre beviteli mezőket? 

 

A weboldalak egyik legfontosabb interaktív eleme az űrlap. Segítségével adatokat gyűjthetünk a felhasználóktól, például regisztrációs adatokat, visszajelzéseket vagy akár rendelési információkat. De hogyan is működik egy HTML űrlap? Nézzük meg az alapokat! 🚀

🏗️ Mi az az űrlap a HTML-ben?

Az űrlap egy <form> címkével kezdődik, amely tartalmazza a beviteli mezőket. Minden űrlap célja, hogy a felhasználó által megadott adatokat elküldje egy szerverre, ahol azokat feldolgozhatjuk.

Alapvető szerkezete így néz ki:

<form action=”feldolgozas.php” method=”post”>
         <label for=”nev”>Név:</label>
         <input type=”text” id=”nev” name=”nev”>

         <label for=”email”>E-mail:</label>
         <input type=”email” id=”email” name=”email”>

         <button type=”submit”>Küldés</button>
</form>

 

alap űrlap HTML

🔹 A action attribútum határozza meg, hova küldjük az adatokat.
🔹 A method="post" azt jelzi, hogy az adatokat nem az URL-ben továbbítjuk, hanem biztonságosabb módon, a HTTP POST metódussal.

✍️ Beviteli mezők típusai

A HTML-ben többféle beviteli mezőt használhatunk, attól függően, hogy milyen típusú adatokat szeretnénk bekérni. Lássunk néhány alapvető mezőt! 🔽

📌 Szövegmező (<input type="text">)

<labe<label for=”nev”>Név:</label>
<input type=”text” id=”nev” name=”nev” placeholder=”Írd be a neved…”>

 

✅ Egy egyszerű szövegmező, például név vagy egyéb rövidebb adatok megadásához.

✉ E-mail cím megadása (<input type="email">)

<<label for=”email”>E-mail:</label>
<input type=”email” id=”email” name=”email” placeholder=”Írd be az e-mail címed…”>

✅ Az type="email" használatával a böngésző ellenőrzi, hogy a megadott adat valóban e-mail cím-e.

🔒 Jelszó mező (<input type="password">)

<label for=”jelszo”>Jelszó:</label>
<input type=”password” id=”jelszo” name=”jelszo” placeholder=”Adj meg egy jelszót…”>

✅ A beírt karaktereket a böngésző csillagokkal vagy pontokkal rejti el.

📅 Dátum választása (<input type="date">)

Lehetővé teszi egy dátum kiválasztását egy naptárból.

<<label for=”datum”>Születési dátum:</label>
<input type=”date” id=”datum” name=”datum”>

🎚️ Csúszka (<input type="range">)

<label for=”ertek”>Válassz egy értéket:</label>
<input type=”range” id=”ertek” name=”ertek” min=”1″ max=”100″>

✅ Hasznos például értékelésekhez vagy beállításokhoz.

🔘 Kiválasztási lehetőségek

Nemcsak szöveges adatokat kérhetünk be, hanem előre megadott opciókat is választhat a felhasználó.

✅ Jelölőnégyzet (<input type="checkbox">)

<input type=”checkbox” id=”feltetelek” name=”feltetelek”>
<label for=”feltetelek”>Elfogadom a feltételeket</label>

✅ Ha egy vagy több dolgot szeretnénk kijelölni (például érdeklődési körök).

⚡ Rádiógomb (<input type="radio">)

<<label>Nem:</label>
<input type=”radio” id=”ferfi” name=”nem” value=”ferfi”>
<label for=”ferfi”>Férfi</label>
<input type=”radio” id=”no” name=”nem” value=”no”>
<label for=”no”>Nő</label>

✅ Ha csak egy opció választható.

🎭 Legördülő menü (<select> tag)

<label for=”orszag”>Válaszd ki az országodat:</label>
<select id=”orszag” name=”orszag”>
          <option value=”hu”>Magyarország</option>
          <option value=”de”>Németország</option>
          <option value=”us”>USA</option>
</select>

✅ Ha több választható lehetőséget szeretnénk megadni.

📩 Adatküldés a szerverre – A küldés gomb

Az űrlap nem működik megfelelően egy submit gomb nélkül! A <button> vagy a <input type="submit"> segítségével lehet elküldeni az adatokat:

<button type=”submit”>Küldés</button>

🔹 Az űrlap elküldése után az adatok egy szerverre kerülnek, ahol feldolgozhatók (pl. PHP, Node.js vagy más backend technológia segítségével).

🎯 Összegzés – Mire jó egy űrlap? 

✅ A weboldal interaktívvá válik.
✅ A felhasználók adatokat adhatnak meg (regisztráció, kapcsolatfelvétel, rendelés).
✅ Az adatokat egy szerver dolgozhatja fel.
✅ A böngészők beépített ellenőrzési funkciói segítenek (pl. e-mail formátum).

🔗 Kapcsolódó cikkek

📌 HTML <textarea> címke – Többsoros szövegbeviteli mező

HTML input címke

HTML input címke

Szerző: | 2025. febr. 22. | HTML

HTML input címke

Az űrlapok alapköve

 

A <input> címke az egyik legfontosabb HTML-űrlapelem, amely lehetővé teszi, hogy a felhasználók különböző típusú adatokat adjanak meg egy weboldalon. Segítségével beviteli mezőket hozhatunk létre, például szöveges mezőt, jelszómezőt, dátumválasztót, számbeviteli mezőt és még sok mást.

🔹 Az <input> címke alapjai

A <input> egy önmagában álló (önzáró) HTML-címke, amely nem igényel külön záró </input> tag-et. A beviteli mező típusát az type attribútummal tudjuk megadni.

Alapvető szerkezete:

<input type=”text”>

 

👉 Ez egy egyszerű szöveges mezőt hoz létre, amelybe a felhasználó írhat.

🔹 Az <input> címke leggyakoribb típusai

📝 Szövegbevitel (text)

Ez az alapértelmezett beviteli mező, amely lehetővé teszi, hogy a felhasználó szöveget gépeljen be.

<label>Név: </label>
<input type=”text” name=”nev” placeholder=”Írd be a neved…”>

 

🔹 placeholder – Segítséget nyújt a felhasználóknak azzal, hogy megmutatja, mit kell beírni.

🔒 Jelszó (password)

A password típusú beviteli mező esetén a karaktereket csillagokkal vagy pontokkal jeleníti meg a böngésző.

<label>Jelszó: </label>
<input type=”password” name=”jelszo”>

📧 E-mail (email)

Az e-mail mező segít a felhasználóknak helyes e-mail formátumban megadni az adatokat.

<label>E-mail: </label>
<input type=”email” name=”email” required>

👉 required – Kötelezővé teszi a mező kitöltését.

📅 Dátum (date)

Lehetővé teszi egy dátum kiválasztását egy naptárból.

<label>Születési dátum: </label>
<input type=”date” name=”szuletes”>

🔢 Szám (number)

Csak számokat enged bevinni, és beállítható minimum és maximum érték.

<label>Életkor: </label>
<input type=”number” name=”eletkor” min=”18″ max=”99″>

✅ Jelölőnégyzet (checkbox)

Olyan mező, amelyet a felhasználó bejelölhet.

<input type=”checkbox” name=”feltetelek” required> Elfogadom a feltételeket

🔘 Rádiógomb (radio)

Lehetővé teszi, hogy a felhasználó egy lehetőséget válasszon egy csoportból.

<p>Nem:</p>
<input type=”radio” name=”nem” value=”ferfi”> Férfi
<input type=”radio” name=”nem” value=”no”> Nő

👉 Az azonos name attribútummal rendelkező rádiógombok egy csoportot alkotnak.

📂 Fájlfeltöltés (file)

Lehetővé teszi a fájlok feltöltését.

<label>Profilkép: </label>
<input type=”file” name=”profilkep”>

🎨 Az <input> mezők formázása

Bár az <input> önmagában nem formázott, CSS segítségével megjelenését testreszabhatjuk.

<linput[type=”text”], input[type=”email”] {
padding: 10px;
border: 2px solid #007bff;
border-radius: 5px;
}

Itt van egy egyszerű HTML-űrlap, amely tartalmazza a leggyakoribb <input> típusokat, egy <textarea> mezőt, valamint egy beküldő gombot. Az űrlap az alapvető adatokat kéri be, például nevet, e-mail címet, jelszót, nemet, életkort és egy megjegyzést.

🔹 Funkciók:

  • Kötelező mezők (required attribútum)
  • Placeholder szövegek az útmutatáshoz
  • Rádiógombok a nem kiválasztásához
  • Jelölőnégyzet a feltételek elfogadásához
  • Beküldő gomb

📌 Kód:

<lab

<!DOCTYPE html>
<html lang=”hu”>
<head>
         <meta charset=”UTF-8″>
         <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
         <title>Egyszerű HTML űrlap</title>
         <style>
               body {
                       font-family: Arial, sans-serif;
                       max-width: 400px;
                       margin: auto;
               }
                form {
                       background: #f4f4f4;
                       padding: 15px;
                       border-radius: 5px;
                }
               label {
                       font-weight: bold;
                       display: block;
                       margin-top: 10px;
                }
              input, textarea, select {
                       width: calc(100% – 16px);
                       padding: 8px;
                       margin-top: 5px;
                       border: 1px solid #ccc;
                       border-radius: 4px; 
                       display: block;   
                }
              .radio-group {
                        display: flex;
                        align-items: center;
                        gap: 10px;                  

                }
               .checkbox-container {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        margin-top: 10px;
               }
              button {
                      margin-top: 15px;
                      padding: 10px;
                      width: 100%;
                      background: #007bff;
                      color: white;
                      border: none;
                      border-radius: 5px;
                      cursor: pointer;
               }
             button:hover {
                     background: #0056b3;
              }
        </style>
</head>
<body>

            <h2>Regisztrációs űrlap</h2>

            <form action=”#” method=”post”>
            <label for=”nev”>Név:</label>
            <input type=”text” id=”nev” name=”nev” placeholder=”Írd be a neved…” required>

             <label for=”email”>E-mail:</label>
             <input type=”email” id=”email” name=”email” placeholder=”Írd be az e-mail címed…” required>

              <label for=”jelszo”>Jelszó:</label>
              <input type=”password” id=”jelszo” name=”jelszo” placeholder=”Adj meg egy jelszót…” required>

               <label>Nem:</label>
               <input type=”radio” id=”ferfi” name=”nem” value=”ferfi” required>
               <label for=”ferfi”>Férfi</label>
               <input type=”radio” id=”no” name=”nem” value=”no” required>
               <label for=”no”>Nő</label>

               <label for=”eletkor”>Életkor:</label>
               <input type=”number” id=”eletkor” name=”eletkor” min=”18″ max=”99″             placeholder=”Add meg az életkorod…” required>

                <label for=”uzenet”>Megjegyzés:</label>
                <textarea id=”uzenet” name=”uzenet” rows=”4″ placeholder=”Írd be a megjegyzésed…”></textarea>

                <input type=”checkbox” id=”feltetelek” name=”feltetelek” required>
                <label for=”feltetelek”>Elfogadom a felhasználási feltételeket</label>

                <button type=”submit”>Regisztráció</button>
            </form>

</body>
</html>

regisztrációs űrlap

Ezen persze még sokat lehetne finomítani, de ez az űrlap tartalmazza:

✅ Név, e-mail, jelszó, életkor bekérése
✅ Rádiógomb segítségével kiválasztható a nem
✅ Számbeviteli mező az életkorhoz (csak 18 és 99 között lehet megadni)
✅ Textarea egy üzenet vagy megjegyzés beírásához
✅ Jelölőnégyzet a feltételek elfogadásához
✅ Beküldő gomb, ami elküldi az adatokat

🏆 Összegzés

✅ Az <input> címke a HTML egyik legfontosabb építőeleme az űrlapok létrehozásához.
✅ Az type attribútummal beállíthatjuk a mező típusát.
✅ A felhasználói élményt placeholder, required, min/max attribútumokkal javíthatjuk.
✅ CSS segítségével egyedi stílust adhatunk az űrlapmezőknek.

🔗 Kapcsolódó cikkek

📌 HTML <textarea> címke – Többsoros szövegbeviteli mező
📌 HTML űrlapok alapjai

HTML Textarea

Szerző: | 2025. febr. 22. | HTML

HTML textarea

Többsoros szövegbeviteli mező

 

Az űrlapok egyik fontos eleme a <textarea> címke, amely lehetővé teszi a felhasználók számára, hogy többsoros szöveget írjanak be. Ez különösen hasznos, ha hosszabb üzeneteket, megjegyzéseket vagy visszajelzéseket szeretnél begyűjteni egy weboldalon.

📌 Hogyan működik a <textarea> címke?

A <textarea> egy nyitó és egy záró címkéből áll, és benne helyezkedik el az alapértelmezett szöveg (ha van ilyen):

<textarea name=”megjegyzes”>Ide írhatod a megjegyzésed…</textarea>

 

Ez az alapbeállítás egy egyszerű szövegmezőt hoz létre.

🔧 Fontos attribútumok

A <textarea> több hasznos tulajdonsággal rendelkezik, amelyekkel testre szabhatod a működését:

Attribútum Leírás Példa
name Az űrlapon belül azonosítja a szövegmezőt <textarea name="komment"></textarea>
rows Meghatározza a sorok számát (magasság) <textarea rows="5"></textarea>
cols Meghatározza az oszlopok számát (szélesség) <textarea cols="30"></textarea>
placeholder Előre megjelenített szöveg <textarea placeholder="Írd ide a véleményed"></textarea>
maxlength Meghatározza a maximálisan beírható karakterek számát <textarea maxlength="500"></textarea>
readonly A mező nem szerkeszthető <textarea readonly>Csak olvasható szöveg</textarea>
disabled Letiltja a mezőt <textarea disabled>Nincs bekapcsolva</textarea>
required Kötelezővé teszi a mezőt <textarea required></textarea>

📢 Példa egy teljes űrlapra:

<form action=”feldolgozas.php” method=”post”>
       <label for=”visszajelzes”>Írd meg a véleményed:</label><br>
       <textarea id=”visszajelzes” name=”visszajelzes” rows=”4″ cols=”40″                              placeholder=”Írd ide a véleményed…”></textarea><br>
       <input type=”submit” value=”Elküld”>
</form>

 

űrlap HTML

Ebben a példában egy alap űrlapot hoztunk létre, ahol a felhasználók visszajelzést küldhetnek. A label használata segíti az akadálymentességet, a placeholder pedig útmutatást ad, segít megérteni a felhasználónak, mit kell beírni az adott mezőbe. Ha elkezd írni, a placeholder eltűnik. Halványabban is látszódik a szöveg, ami el fog tűnni. 
Fontos, hogy placeholderrel ne üzenjünk fontos információt és a háttérszínt / betűszínt jól válasszuk ki, hogy el lehessen így is olvasni. 

 

💡 Mikor használjuk a <textarea> címkét?

✔ Visszajelzések gyűjtése – pl. vélemények, értékelések
✔ Üzenetek fogadása – pl. kapcsolatfelvételi űrlapokon
✔ Kódok vagy naplók beküldése – pl. fejlesztői eszközökben
✔ Naplóírás vagy személyes jegyzetek – például egy webes jegyzettömb alkalmazásban

🚀 Összegzés

A <textarea> címke a HTML egyik leghasznosabb beviteli mezője, amely lehetővé teszi a többsoros szöveg beírását és testreszabását. A megfelelő attribútumok segítségével könnyedén alakítható az igényeidnek megfelelően.

🔗 Kapcsolódó cikkek:
👉 [HTML űrlapok alapjai]
👉 [Hogyan használjuk a <input> mezőket?]
👉 [A <form> címke és beállításai]

Figure és figcaption

Figure és figcaption

Szerző: | 2025. febr. 22. | HTML

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>

idézet HTML

🎯 Ö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