Mi az a <header> címke?
📌 A <header> címke – A weboldalak fejlécének szerepe
A <header> HTML5-ös szemantikus elem, amely a weboldalak vagy tartalmi egységek fejlécrészét jelöli. Ez a rész tartalmazhat címeket, logókat, navigációs menüket és egyéb kulcsfontosságú információkat, amelyek segítik a látogatókat az oldalon való eligazodásban.
Ebben a cikkben részletesen bemutatjuk, mire való a <header>, hogyan kell használni, és milyen gyakori hibákat érdemes elkerülni.
🔹 1. Mi az a <header> címke?
A <header> egy szemantikus HTML5 elem, amelyet egy weboldal vagy egy tartalmi egység fejléceként használunk.
💡 Fontos tudni:
✔ Nem csak a főoldalon lehet <header>, hanem minden egyes szakaszban és cikkben is lehet saját fejléce!
✔ A <header> nem azonos a <head> címkével! (A <head> a metaadatokat tartalmazza, míg a <header> vizuálisan is megjelenik az oldalon.)
🔹 2. Hogyan néz ki a <header> a HTML-ben?
📌 Példa egy alapvető <header> szerkezetre
<header>
<h1>Digitális Felfedezők</h1>
<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>
</header>
💡 Mit látunk itt?
✔ Az <h1> tartalmazza a weboldal nevét vagy fő címét.
✔ A <nav> címke egy navigációs menüt tartalmaz, amely segít az oldalon való eligazodásban.
🔹 3. Hol használhatjuk a <header> címkét?
A <header> címke két fő helyen használható:
1️⃣ A weboldal fő fejléceként
2️⃣ Egyes szekciók vagy cikkek fejléceként
📌 Fő fejléc az egész oldalhoz
<header>
<h1>Digitális Felfedezők</h1>
<p>A webfejlesztés és digitális kultúra világa.</p>
</header>
✔ Ez a fejléc minden oldalon megjelenhet és a weboldal címét tartalmazza.
📌 Fejléc egy <section> vagy <article> elemen belül
📌 Fejléc egy <section> vagy <article> elemen belül
<article>
<header>
<h2>Hogyan használjuk a header címkét?</h2>
<p>Közzétéve: 2025. február 25.</p>
</header>
<p>A header segít strukturáltabbá tenni az oldalt…</p>
</article>
✔ Ez egy blogcikk fejléce, amely tartalmazza a cikk címét és közzétételi dátumát.
🔹 4. A <header> és a <nav> kapcsolata
A navigációs menük általában a fejléc részeként jelennek meg. Bár a <nav> és a <header> külön is használható, gyakran együtt fordulnak elő.
📌 Példa: <header> és <nav> kombinációja
<header>
<h1>Webfejlesztés alapjai</h1>
<nav>
<ul>
<li><a href=”index.html”>Kezdőlap</a></li>
<li><a href=”tanfolyamok.html”>Tanfolyamok</a></li>
<li><a href=”kapcsolat.html”>Kapcsolat</a></li>
</ul>
</nav>
</header>
💡 TIPP:
✅ Ha a navigációs menüt az oldal több részében is szeretnéd megjeleníteni, használd külön <nav> címkével!
🔹 5. Gyakori hibák és hogyan kerüld el őket
📌 <header> nem tartalmaz címet
🚨 Hiba:
<header>
<nav>
<ul>
<li><a href=”index.html”>Főoldal</a></li>
</ul>
</nav>
</header>
❌ Mi a probléma?
- Egy fejlécnek mindig tartalmaznia kell valamilyen címet (pl.
<h1>,<h2>), különben a szemantikai jelentése elveszik.
📌 Túl sok <header> egy oldalon
🚨 Hiba:
<header>
<h1>Digitális Felfedezők</h1>
</header>
<header>
<h2>Alfejezet</h2>
</header>
❌ Mi a probléma?
- A fő
<header>fejlécből csak egy lehet az oldalon. Ha egy szekcióhoz vagy cikkhez külön fejlécet akarsz, akkor azokat a megfelelő tartalmi egységen belül használd.
📌 Összekeverés a <head> címkével
🚨 Hiba:
<head>
<header>
<h1>Digitális Felfedezők</h1>
</header>
</head>
❌ Mi a probléma?
- A
<header>nem a<head>része! A<head>metaadatokat tartalmaz, míg a<header>vizuális elemként jelenik meg az oldalon.
🔹 6. Összegzés – Miért fontos a <header>?
✔ A <header> segít a felhasználók és a keresőmotorok számára a tartalom szervezésében.
✔ Tartalmazhat címet, logót, navigációs menüt és egyéb kulcsfontosságú információkat.
✔ Egy oldal fő fejléceként, vagy egy adott szakasz/cikk fejléceként is használható.
✔ Ne keverjük össze a <head> címkével, mert az metaadatokat tartalmaz, míg a <header> a tényleges tartalom része.
📌 Kapcsolódó bejegyzések:
🔗 A <section> címke – Tartalmi blokkok rendszerezése
🔗 Az <article> címke – Önálló tartalmi egységek