HTML head címke

HTML head címke

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

<head> – a weboldal láthatatlan, de kulcsfontosságú része

 

A <head> címke a HTML dokumentum egyik legfontosabb része, amely a weboldal működéséhez és megjelenítéséhez elengedhetetlen információkat tartalmaz. Bár a felhasználók nem látják közvetlenül a tartalmát, a keresőmotorok, a böngészők és a közösségi oldalak számára kulcsfontosságú elemeket hordoz. Nézzük meg, mit tartalmaz és hogyan érdemes használni!

📌 Mit tartalmaz a <head>?

A <head> szakaszban olyan metaadatokat és beállításokat adunk meg, amelyek befolyásolják a weboldal megjelenését, működését és keresőoptimalizálását. Ezek közé tartoznak:

1️⃣ Az oldal címe – <title>

A <title> címke határozza meg a weboldal címét, amely a böngésző fülén jelenik meg. Fontos szerepe van a keresőoptimalizálásban (SEO) is, mert a Google ezt a címet jeleníti meg a találati listában.

🔹 Példa:

<title>Digitális Felfedezők – HTML Tanfolyam</title>

 

2️⃣ Metaadatok – <meta>

A <meta> címkék segítenek a keresőmotoroknak és a böngészőknek a weboldal megfelelő értelmezésében.

✔ Karakterkódolás beállítása:

<meta charset= „UTF-8”>

 

Ez biztosítja, hogy a weboldalon lévő ékezetes karakterek és speciális szimbólumok megfelelően jelenjenek meg.

✔ Reszponzivitás és mobilbarát beállítások:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Ez a beállítás gondoskodik róla, hogy a weboldal megfelelően jelenjen meg különböző eszközökön (pl. mobilon és tableten).

✔ SEO és keresőmotorok információi:

<meta name= „description” content=”Tanuld meg a HTML alapjait!”>

A meta description rövid leírást ad a weboldal tartalmáról, amit a keresőmotorok a találati listában jelenítenek meg.

✔ Kulcsszavak (bár a Google már nem veszi figyelembe):

<meta name= „keywords” content=”HTML, webfejlesztés, programozás”>

3️⃣ CSS és betűtípusok linkelése – <link>

A <link> címkével külső CSS fájlokat, betűtípusokat vagy ikonokat kapcsolhatunk a weboldalhoz.

✔ Külső CSS csatolása:

<link rel=”sytelsheet” href=”style.css”>

Ezzel a weboldal a style.css fájlban található stílusokat fogja használni.

✔ Google Fonts betűtípus beillesztése:

<link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=”stylesheet”>

4️⃣ JavaScript fájlok csatolása – <script>

A <script> címkével JavaScript fájlokat adhatunk hozzá a weboldalhoz.

✔ Példa:

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

A defer attribútum gondoskodik arról, hogy a JavaScript fájl csak a HTML betöltése után fusson le.

📝 Összegzés

A <head> egy weboldal háttérben működő, de elengedhetetlen része. Itt állíthatjuk be:
✅ Az oldal címét (<title>)
✅ A keresőmotorok számára fontos leírásokat (<meta> tag-ek)
✅ A mobilbarát megjelenést (viewport)
✅ A CSS stíluslapokat (<link>)
✅ A külső JavaScript fájlokat (<script>)

Ha jól használod a <head> elemet, az oldalad gyorsabb, optimalizáltabb és könnyebben megtalálható lesz a keresőkben. 🚀

📌 További olvasnivaló:
🔗 <header> címke
🔗 Az <body> címke szerepe

Mi a body szerepe?

Mi a body szerepe?

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

<body> – a weboldal látható tartalma

 

A <body> HTML címke az oldal látható tartalmát foglalja magában. Minden, amit egy felhasználó a böngészőben lát – szövegek, képek, videók, linkek, gombok és egyéb elemek – itt található.

🔹 Mi a <body> szerepe?

✔ Az összes megjelenített tartalom a <body> címke belsejében helyezkedik el.
✔ A HTML dokumentum fő része, amely a látogatók számára látható.
✔ Tartalmazhat más szerkezeti HTML elemeket, pl.:

  • <header> – fejléc
  • <nav> – navigáció
  • <main> – fő tartalom
  • <section>, <article> – tartalmi egységek
  • <aside> – oldalsáv
  • <footer> – lábléc

🔹 Alap HTML szerkezet

A <body> mindig a <html> címkén belül, de a <head> után helyezkedik el.

<!DOCTYPE html>
<html lang=”hu”>
<head>
         <meta charset=”UTF-8″>
         <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
         <title>Weboldal címe</title>
</head>
<body>

<header>
         <h1>Üdvözlünk a weboldalon!</h1>
</header>

<nav>
       <ul>
            <li><a href=”#”>Kezdőlap</a></li>
            <li><a href=”#”>Rólunk</a></li>
            <li><a href=”#”>Kapcsolat</a></li>
       </ul>
</nav>

<main>
           <h2>Legfrissebb hírek</h2>
           <p>Ez egy példa bejegyzés a weboldal tartalmára.</p>
</main>

<footer>
            <p>&copy; 2025 Digitális Felfedezők</p>
</footer>

</body>
</html>

 

body HTML

🔹 Hogyan épül fel a <body> tartalma?

A <body> különböző típusú tartalmakat foglalhat magában:

1️⃣ Szöveges elemek

🔹 Címsorok: <h1> – <h6>
🔹 Bekezdések: <p>
🔹 Felsorolások: <ul>, <ol>, <li>

Példa:

<body>
         <h1>Weboldalam címe</h1>
         <p>Ez egy bekezdés a weboldalon.</p>
         <ul>
              <li>Első listaelem</li>
              <li>Második listaelem</li>
         </ul>
</body>

2️⃣ Médiaelemek

🔹 Képek: <img>
🔹 Videók: <video>
🔹 Audió: <audio>

Példa:

<body>
             <h1>HTML médiaelemek</h1>
             <img src=”kep.jpg” alt=”Példa kép”>
             <video controls>
                    <source src=”video.mp4″ type=”video/mp4″>
             </video>
</body>

3️⃣ Interaktív elemek

🔹 Gombok: <button>
🔹 Űrlapok: <form>, <input>, <textarea>
🔹 Linkek: <a>

Példa:

<body>
          <button>Kattints ide!</button>
          <form>
                 <label for=”email”>Email címed:</label>
                 <input type=”email” id=”email” name=”email”>
                 <button type=”submit”>Küldés</button>
           </form>
</body>

 


🔹 A <body> és a <head> közötti különbség

 

Tulajdonság <head> <body>
Funkció A háttérben működő információkat tartalmazza (pl. metaadatok, CSS, JavaScript) A weboldal megjelenített tartalma
Láthatóság Nem látható a böngészőben Látható a böngészőben
Példa elemek <title>, <meta>, <link>, <script> <h1>, <p>, <img>, <table>, <form>

🔹 GYIK – Gyakran Ismételt Kérdések

 

1️⃣ Kötelező a <body> címke egy HTML dokumentumban?

🔹 Igen. Minden látható tartalom a <body>-ba kerül.

2️⃣ Lehet több <body> egy HTML oldalon?

🔹 Nem. Egy HTML oldalon csak egy <body> lehet.

3️⃣ Mi történik, ha nem használok <body> címkét?

🔹 A böngészők még mindig megjeleníthetik a tartalmat, de a HTML szabvány szerint nem ajánlott elhagyni.

🔹 Összegzés

✔ A <body> tartalmazza a weboldal összes látható elemét.
✔ Minden HTML oldalnak pontosan egy <body> címkéje van.
✔ Nem keverendő össze a <head>-del, amely a metaadatokat tartalmazza.
✔ Szövegek, képek, multimédia és interaktív elemek egyaránt elhelyezhetők benne.

👉 Nézd meg a következő bejegyzést a <head> szerepéről és a metaadatokról! 🔗

Main címke

Main címke

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

A <main> címke –

A weboldal fő tartalma

 

A <main> HTML elem a weboldal központi, egyedi tartalmát jelöli. Ez az a rész, amely közvetlenül kapcsolódik az oldal céljához, és általában nem tartalmaz oldalsávokat, fejlécet vagy láblécet.


🔹 Miért fontos a <main>?

✔ Jelzi a böngészőnek és a keresőmotoroknak (pl. Google), hogy ez a weboldal fő tartalma.
✔ Segíti az akadálymentesítést (pl. képernyőolvasók gyorsan elérhetik).
✔ Egyértelműbbé teszi a HTML szerkezetet, segít a jobb keresőoptimalizálásban (SEO).
✔ Csak egy <main> címke lehet egy HTML oldalon.

🔹 Hogyan használjuk?

A <main> általában az oldal fő tartalmát foglalja magában, és közvetlenül a <header> és <nav> után helyezkedik el.

📝 Alap HTML példa:

<header>
      <h1>Digitális Felfedezők</h1>
      <nav>
          <ul>
              <li><a href=”#”>Kezdőlap</a></li>
              <li><a href=”#”>Rólunk</a></li>
              <li><a href=”#”>Kapcsolat</a></li>
         </ul>
       </nav>
</header>

<main>
          <h2>Üdvözlünk a weboldalunkon!</h2>
          <p>Itt találod az összes friss bejegyzésünket és hasznos információt.</p>
</main>

<footer>
          <p>&copy; 2025 Digitális Felfedezők</p>
</footer>

 

HTML oldal szerkezete

🔹 Hogyan építsünk fel egy teljes weboldalt <main> segítségével?

A <main> általában további szerkezeti HTML elemeket tartalmaz, például:

  • <section> – Tartalmi egységekre bontja a fő részt.
  • <article> – Blogposztokhoz, hírekhez vagy különálló tartalmi elemekhez.
  • <aside> – Kiegészítő információk (pl. ajánlott cikkek, reklámok).

📝 Példa strukturált <main> használatra

<main>
<section>
<h2>Legfrissebb hírek</h2>
<article>
<h3>HTML alapjai</h3>
<p>Megtanulhatod a HTML struktúráját és használatát.</p>
<a href=”#”>Olvasd tovább</a>
</article>

<article>
<h3>CSS bevezetés</h3>
<p>Stílusok és design elemek a weboldaladon.</p>
<a href=”#”>Tovább a cikkhez</a>
</article>
</section>

<aside>
<h3>Kapcsolódó témák</h3>
<ul>
<li><a href=”#”>JavaScript alapok</a></li>
<li><a href=”#”>Reszponzív webdesign</a></li>
</ul>
</aside>
</main>

HTML main elemei

🔹 GYIK – Gyakran Ismételt Kérdések

1️⃣ Kötelező használni a <main> címkét?

🔹 Nem kötelező, de erősen ajánlott a weboldal szerkezetének tisztázására.

2️⃣ Lehet több <main> címke egy oldalon?

🔹 Nem! Egy oldalon csak egy <main> lehet.

3️⃣ Mi történik, ha nem használok <main>-t?

🔹 A weboldal még mindig működni fog, de a keresőmotorok és az akadálymentesítés szempontjából kevésbé lesz optimalizált.

🔹 Összegzés

✔ A <main> az oldal fő tartalmának kijelölésére szolgál.
✔ Csak egy lehet belőle egy oldalon.
✔ Segíti az SEO-t és az akadálymentesítést.
✔ Gyakran <section>, <article> és <aside> elemeket tartalmaz.

👉 Ha következő lépésként szeretnéd még részletesebben tanulni a HTML struktúrát, nézd meg a <section> és <article> címkékről szóló bejegyzéseket! 🔗

Az aside címke

Az aside címke

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

Az <aside> címke Kiegészítő tartalmak és oldalsávok

 

A <aside> egy HTML5 szemantikus címke, amelyet kiegészítő tartalmak elhelyezésére használunk. Tipikusan oldalsávokban, hirdetésekhez, kapcsolódó cikkekhez vagy egyéb másodlagos információkhoz alkalmazzuk.

Ebben a bejegyzésben megnézzük, hogyan használhatod a <aside> címkét, milyen tartalmak illenek bele, és milyen gyakori hibákat érdemes elkerülni.

🔹 1. Mi az <aside> címke szerepe?

A <aside> címke másodlagos, az oldal fő tartalmához lazán kapcsolódó információkat tartalmaz.

💡 Fontos tudni:
✔ Nem része a fő tartalomnak, inkább kiegészítő információkat tartalmaz.
✔ Oldalsávként (sidebar) vagy cikkekhez kapcsolódó extra tartalomként is használható.
✔ Segít a keresőmotoroknak és a felhasználóknak megérteni az oldal szerkezetét.

🔹 2. Hogyan néz ki az <aside> a HTML-ben?

Az <aside> gyakran az oldalsávban található, de lehet egy cikkhez kapcsolódó extra információ is.

📌 Példa egy alapvető <aside> szerkezetre

<aside>
       <h2>Kapcsolódó cikkek</h2>
       <ul>
            <li><a href=”cikk1.html”>HTML alapjai</a></li>
            <li><a href=”cikk2.html”>CSS bevezetés</a></li>
            <li><a href=”cikk3.html”>Reszponzív webdesign</a></li>
      </ul>
</aside>

 

HTML aside, CSS nélkül

💡 Mit látunk itt?
✔ A <h2> egy alcím, amely leírja az oldalsáv tartalmát.
✔ A <ul> lista tartalmazza a kapcsolódó cikkek linkjeit.

Azt is elvárnánk egy ilyen címkétől, hogy oldalt jelenítse meg a szöveget, de az <aside> címke alapértelmezés szerint blokkszintű elem, ami azt jelenti, hogy mindig új sorba kerül és teljes szélességet foglal el. Ahhoz, hogy az oldalsávként jelenjen meg, szükséged van CSS-re, amely float (régebbi megoldás) vagy flexbox/grid segítségével helyezi el a megfelelő pozícióba. Erről majd később lesz szó. 

🔹 3. Milyen tartalmak illenek az <aside>-ba?

A <aside> leggyakrabban az alábbi típusú kiegészítő információkat tartalmazza:

📌 1️⃣ Oldalsáv (sidebar) a fő tartalom mellett

<aside>
<h2>Rólunk</h2>
<p>Ez a weboldal segít elsajátítani a webfejlesztés alapjait.</p>
</aside>

✔ Egy rövid bemutatkozó szöveg, amely nem a fő tartalom része, de hasznos lehet a látogatóknak.

📌 2️⃣ Hirdetések és promóciók

<aside>
      <h2>Hirdetés</h2>
      <a href=”https://example.com”>
          <img src=”hirdetes.jpg” alt=”Reklám”>
      </a>
</aside>

✔ A <aside> megfelelő hely hirdetések elhelyezésére is.

📌 3️⃣ Kapcsolódó tartalmak egy blogcikk mellett

<<article>
       <h1>Mi az a HTML5?</h1>
      <p>A HTML5 egy modern szabvány…</p>

  <aside>
       <h2>További olvasnivaló</h2>
       <ul>
             <li><a href=”html-tortenelem.html”>A HTML története</a></li>
             <li><a href=”html5-ujdonsagok.html”>A HTML5 újdonságai</a></li>
      </ul>
    </aside>
</article>

 

✔ Ebben a példában az <aside> egy cikken belül jelenik meg, kiegészítő információkkal.

🔹 4. Gyakori hibák és hogyan kerüld el őket

📌 1️⃣ Az <aside> nem helyettesítheti a fő tartalmat
🚨 Hiba:

<aside>
         <h1>HTML Tanfolyam</h1>
         <p>Tanuld meg a HTML alapjait.</p>
</aside>

 

❌ Mi a probléma?

  • Az <aside> nem a fő tartalom megjelenítésére való! Az ilyen tartalmaknak <article> vagy <main> elemen belül kell lenniük.

📌 2️⃣ Nem megfelelő helyen lévő <aside>
🚨 Hiba:

<head>
        <aside>
             <p>Ez egy oldalsáv.</p>
        </aside>
</head>

 

❌ Mi a probléma?

  • Az <aside> mindig a <body>-n belül kell, hogy legyen, nem pedig a <head> részben.

📌 3️⃣ Nem kapcsolódik a fő tartalomhoz
🚨 Hiba:

    <article>
           <h1>CSS Alapok</h1>
           <p>CSS segít a weboldalak stílusának meghatározásában.</p>

       <aside>
          <h2>Kapcsolódó cikkek</h2>
          <ul>
               <li><a href=”recept.html”>Hogyan készítsünk palacsintát?</a></li>
          </ul>
        </aside>
    </article>

     

    ❌ Mi a probléma?

    • A kapcsolódó cikkek nem kapcsolódnak a fő tartalomhoz. Az <aside>-ban lévő információknak relevánsnak kell lenniük a fő tartalomhoz.

     

    🔹 5. Összegzés – Miért fontos az <aside>?

    ✔ A <aside> kiegészítő információkat tartalmaz, amelyek az oldal fő tartalmához kapcsolódnak.
    ✔ Oldalsávként (sidebar) vagy egy cikk mellett extra tartalomként is használható.
    ✔ Használható kapcsolódó cikkek, reklámok, rövid bemutatkozások és egyéb információk megjelenítésére.
    ✔ Ne helyettesítse a fő tartalmat, és mindig kapcsolódjon az oldal többi részéhez!

    📌 Kapcsolódó bejegyzések:

    🔗 A <nav> címke – A weboldalak navigációs rendszere
    🔗 A <header> címke – Weboldalak fejlécének szerepe
    🔗 A <footer> címke – A lábléc megfelelő kialakítása

     

    A nav címke

    A nav címke

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

    A <nav> címke – a weboldalak navigációs rendszere

     

    A <nav> HTML5 szemantikus címke, amely a weboldalak navigációs menüit jelöli. Segít a látogatóknak könnyen eligazodni az oldalon, és javítja a keresőoptimalizálást (SEO) is, mivel a keresőmotorok pontosabban értelmezik a szerkezetet.

    Ebben a bejegyzésben bemutatjuk, hogyan használd a <nav> címkét, milyen típusú menüket hozhatsz létre vele, és milyen gyakori hibákat érdemes elkerülni.

    🔹 1. Mi a <nav> címke szerepe?

    A <nav> HTML5-ben jelent meg, és arra szolgál, hogy a weboldalak navigációs linkjeit egyértelműen elkülönítse más tartalmi elemek között.

    💡 Fontos tudni:
    ✔ A <nav> kizárólag fő navigációs hivatkozásokhoz ajánlott. Ne használjuk minden linkcsoporthoz!
    ✔ Segít a böngészőknek és keresőmotoroknak megérteni, hogy a benne lévő linkek az oldal szerkezetét határozzák meg.
    ✔ Egy weboldalon több <nav> címke is lehet, például egy főmenü és egy láblécben található navigációs blokk.

    🔹 2. Hogyan néz ki a <nav> a HTML-ben?

    A navigációs menük általában egy <ul> (unordered list) listán alapulnak, amelynek elemei <li> (list item) címkékből és <a> (anchor) linkekből állnak.

    📌 Példa egy alapvető <nav> szerkezetre

    <nav>
        <ul>
            <li><a href=”index.html”>Főoldal</a></li>
            <li><a href=”rolunk.html”>Rólunk</a></li>
            <li><a href=”kapcsolat.html”>Kapcsolat</a></li>
        </ul>
    </nav>

     

    nav címke

    💡 Mit látunk itt?
    ✔ A <nav> címke kijelöli a navigációs területet.
    ✔ A <ul> lista tartalmazza a navigációs linkeket.
    ✔ A <li> elemek egy-egy menüpontot jelölnek.

    🔹 3. Milyen típusú menüket hozhatsz létre a <nav> segítségével?

    A <nav> sokféle módon használható, attól függően, milyen navigációs rendszert szeretnél kialakítani.

    📌 1️⃣ Egyszerű vízszintes menü

    <nav>
         <ul>
             <li><a href=”index.html”>Főoldal</a></li>
             <li><a href=”szolgaltatasok.html”>Szolgáltatások</a></li>
             <li><a href=”kapcsolat.html”>Kapcsolat</a></li>
        </ul>
    </nav>

    ✔ Ez a leggyakoribb menütípus, amely könnyen formázható CSS segítségével.

    📌 2️⃣ Legördülő menü (CSS segítségével)

    Ha egy almenüt szeretnél létrehozni, akkor beágyazott <ul> listákat használhatsz.

    <nav>
       <ul>
           <li><a href=”index.html”>Főoldal</a></li>
           <li>
                  <a href=”#”>Szolgáltatások</a>
                  <ul>
                       <li><a href=”webdesign.html”>Webdesign</a></li>
                       <li><a href=”seo.html”>SEO</a></li>
                    </ul>
           </li>
            <li><a href=”kapcsolat.html”>Kapcsolat</a></li>
        </ul>
    </nav>

    nav cimke legödülő menü

    💡 TIPP:
    ✅ Az almenüket CSS segítségével lehet megjeleníteni és elrejteni.

     

    📌 3️⃣ Oldalsávos (sidebar) menü

    Ha egy bal vagy jobb oldali menüt szeretnél létrehozni, akkor a <nav> címkét egy <aside> elembe is helyezheted.

     

     

    <aside>
    <nav>
    <ul>
    <li><a href=”index.html”>Főoldal</a></li>
    <li><a href=”blog.html”>Blog</a></li>
    <li><a href=”kapcsolat.html”>Kapcsolat</a></li>
    </ul>
    </nav>
    </aside>

     

    ✔ Ez az elrendezés gyakori blogokon és híroldalakon.

    🔹 4. Gyakori hibák a <nav> használatakor

    📌 1️⃣ <nav> címkét minden linkcsoporthoz használni
    🚨 Hiba:

    <<nav>
              <a href=”feliratkozas.html”>Feliratkozás</a> |
              <a href=”belepes.html”>Belépés</a>
    </nav>

     

    ❌ Mi a probléma?

    • A <nav> nem arra való, hogy bármilyen hivatkozást tartalmazzon, hanem csak az oldal fő navigációs menüjéhez kell használni.

    📌 2️⃣ Nem megfelelő hierarchia
    🚨 Hiba:

    <nav>
            <a href=”index.html”>Főoldal</a>
            <a href=”blog.html”>Blog</a>
    </nav>

     

    ❌ Mi a probléma?

    • A <nav> címkén belül mindig használjunk rendezett (<ol>) vagy rendezetlen (<ul>) listát, ne csak sima <a> címkéket.

    📌 3️⃣ Rossz helyen lévő <nav>
    🚨 Hiba:

      <footer>
             <nav>
                  <p>Ez egy lábléc menü</p>
              </nav>
      </footer>

       

      ❌ Mi a probléma?

      • A <nav> tartalma listákat és linkeket kell, hogy tartalmazzon, nem pedig szöveges elemeket

       

      🔹 5. Összegzés – Miért fontos a <nav>?

      ✔ A <nav> címke a fő navigációs menü létrehozására szolgál.
      ✔ Segít a keresőmotoroknak és a felhasználóknak az oldalon való tájékozódásban.
      ✔ Használható a fejlécben, az oldalsávban és a láblécben is.
      ✔ Kerüld a felesleges használatát – csak a fő navigációhoz alkalmazd!

      📌 Kapcsolódó bejegyzések:
      🔗 A <header> címke – Weboldalak fejlécének szerepe
      🔗 A <footer> címke – A lábléc megfelelő kialakítása

       

      Mi a footer címke szerepe?

      Mi a footer címke szerepe?

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

      Mi a <footer> címke szerepe?

       

      🔹 1. Mi a <footer> címke szerepe?

      A <footer> egy weboldal vagy tartalmi egység láblécét jelöli. Használata elősegíti a strukturált weboldalak kialakítását, és segít a keresőmotoroknak megérteni a weboldal szerkezetét.

      💡 Fontos tudni:
      ✔ Nem csak a főoldalon lehet <footer>, hanem minden egyes cikkben vagy szekcióban is lehet saját lábléc!
      ✔ A <footer> és a <header> kiegészítik egymást, hiszen az egyik az oldal tetején, a másik az alján helyezkedik el.

      🔹 2. Hogyan néz ki a <footer> a HTML-ben?

      📌 Példa egy alapvető <footer> szerkezetre


      <footer>
             <p>&copy; 2025 Digitális Felfedezők. Minden jog fenntartva.</p>
             <nav>
                  <ul>
                      <li><a href=”adatvedelem.html”>Adatvédelmi tájékoztató</a></li>
                      <li><a href=”felhasznalasi-feltetelek.html”>Felhasználási feltételek</a>                            </li>
                      <li><a href=”kapcsolat.html”>Kapcsolat</a></li>
                    </ul>
               </nav>
      </footer>

       

      footer használata

      💡 Mit látunk itt?
      ✔ Egy szerzői jogi szöveget (&copy;), amely az oldal tulajdonjogát jelöli.
      ✔ Egy <nav> elemet, amelyben hasznos hivatkozások találhatók.

      🔹 3. Hol használhatjuk a <footer> címkét?

      A <footer> címke két fő helyen használható:
      1️⃣ A teljes weboldal láblécében
      2️⃣ Egyes cikkek vagy szakaszok láblécében

      📌 1️⃣ Fő lábléc az egész oldalhoz

      <footer>
               <p>&copy; 2025 Digitális Felfedezők</p>
                <p>Kapcsolat: hello@digitalisfelfedezok.hu</p>
      </footer>

      ✔ Ez a lábléc minden oldalon megjelenik, és az oldal általános információit tartalmazza.

      📌 2️⃣ Lábléc egy <section> vagy <article> elemen belül

       

       

      📌 Fejléc egy <section> vagy <article> elemen belül

      <article>
              <h2>A HTML footer címke használata</h2>
              <p>A footer segít strukturáltabbá tenni az oldalt…</p>
              <footer>
                   <p>Közzétéve: 2025. február 26.</p>
                   <p>Szerző: Digitális Felfedezők</p>
               </footer>
      </article>

      ✔ Ez egy blogcikk lábléce, amely tartalmazza a közzététel dátumát és a szerző nevét.

      🔹 4. Milyen elemeket érdemes beletenni a <footer>-be?

      A láblécbe az alábbi tartalmak kerülhetnek:

      📌 Szerzői jogi információk

      <p>&copy; 2025 Digitális Felfedezők. Minden jog fenntartva.</p>

       

      ✔ Ez jelzi, hogy az oldal tartalma szerzői jogi védelem alatt áll.

      📌 Kapcsolati információk

      <p>Kapcsolat: <a href=”mailto:hello@digitalisfelfedezok.hu”>hello@digitalisfelfedezok.hu</a></p>

       

      ✔ Ha van ügyfélszolgálat vagy kapcsolatfelvételi lehetőség, ezt érdemes feltüntetni.

      📌 Navigációs linkek

      <nav>
          <ul>
               <li><a href=”adatvedelem.html”>Adatvédelmi tájékoztató</a></li>
               <li><a href=”felhasznalasi-feltetelek.html”>Felhasználási feltételek</a></li>
            </ul>
      </nav>

       

      ✔ A felhasználók itt találhatják meg az oldal fontos szabályzatait.

      📌 Közösségi média linkek

      <p>Kövess minket:
        <a href=”https://facebook.com/digitalisfelfedezok” target=”_blank”>Facebook</a> 
        <a href=”https://instagram.com/digitalisfelfedezok” target=”_blank”>Instagram</a>
      </p>

       

      ✔ Segít a közösségi média elérés növelésében.

        🔹 5. Gyakori hibák és hogyan kerüld el őket

        📌 <footer> nem tartalmaz semmi

        ❌ Mi a probléma?

        • Egy üres <footer> nem ad hozzá semmilyen hasznos információt az oldalhoz.

        📌 Rossz helyen lévő <footer>
        🚨 Hiba:

        <head>
               <footer>
                       <p>&copy; 2025 Digitális Felfedezők</p>
                </footer>
        </head>

         

        ❌ Mi a probléma?

        • A <footer> nem a <head> részben van, hanem a <body>-n belül kell lennie!

        📌 3️⃣ Felesleges <footer> minden tartalmi egységben
        🚨 Hiba:

        <article>
             <footer>
                  <p>Ez a cikk lábléce.</p>
             </footer>
        </article>
        <article>
               <footer>
                    <p>Ez is egy lábléc…</p>
                </footer>
        </article>

         

        ❌ Mi a probléma?

        • Ha nincs értelme egy külön láblécnek minden cikkben, akkor ne használd feleslegesen!

        🔹 6. Összegzés – Miért fontos a <footer>?

        ✔ A <footer> a weboldalak alsó részének strukturált kialakítását segíti.
        ✔ Tartalmazhat szerzői jogi információkat, kapcsolatfelvételi adatokat, navigációs linkeket és közösségi média ikonokat.
        ✔ Használható globálisan a teljes weboldalon, vagy lokálisan egyes szakaszokban és cikkekben is.
        ✔ Ne hagyjuk üresen, és mindig tartalmazzon hasznos információt!


        📌 Kapcsolódó bejegyzések:
        🔗 A <header> címke – Weboldalak fejlécének szerepe
        🔗 A <section> címke – Tartalmi blokkok rendszerezése