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>
💡 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>
💡 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