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>© 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>
💡 Mit látunk itt?
✔ Egy szerzői jogi szöveget (©), 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>© 2025 Digitális Felfedezők</p>
<p>Kapcsolat: [email protected]</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>© 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:[email protected]”>[email protected]</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>© 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