4. Hivatkozások és navigáció HTML-ben

2025. november 13. • 14 perc olvasás • HTML5 alapok

A hivatkozások (linkek) a web alapját képezik - ezek teszik lehetővé az oldalak közötti navigációt. Ebben a cikkben megismered a HTML <a> elem használatát, a különböző link típusokat, valamint az abszolút és relatív útvonalak közötti különbségeket.

Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

A hivatkozások (a elem) használata, valamint az abszolút és relatív útvonalak közti különbség alapvető érettségi követelmény. Tudnod kell külső és belső hivatkozásokat létrehozni.

Az <a> elem - Anchor (horgony) EMELT SZINT

A <a> (anchor) elem hoz létre hivatkozásokat. A href (hypertext reference) attribútum adja meg a cél URL-t.

Alapvető szintaxis

HTML - Egyszerű link

<a href="https://www.example.com">Kattints ide!</a>

Élő példa - Egyszerű link:

MDN Web Docs

Link tulajdonságok

href: A céloldal URL-je (kötelező)
Szöveg: A megjelenített kattintható szöveg
Alapértelmezett stílus: Kék, aláhúzott szöveg
Látogatott link: Lila szín (böngésző által tárolva)

Külső linkek - Más weboldalra mutató hivatkozások EMELT SZINT

A külső linkek más domain-ekre vezetnek. Fontos biztonsági és SEO szempontokat figyelembe venni.

Target attribútum - Hol nyíljon meg a link

HTML - Target attribútum

<!-- Ugyanabban az ablakban (alapértelmezett) -->
<a href="https://www.example.com">Link</a>

<!-- Új ablakban/fülben -->
<a href="https://www.example.com" target="_blank">Link</a>

<!-- Szülő frame-ben -->
<a href="page.html" target="_parent">Link</a>

<!-- Teljes ablakban -->
<a href="page.html" target="_top">Link</a>

Target érték	Működés	Használat
`_self`	Ugyanaz az ablak (alapértelmezett)	Általános navigáció
`_blank`	Új ablak/fül	Külső oldalak, dokumentumok
`_parent`	Szülő frame	Frame-ek használatakor
`_top`	Teljes ablak	Frame-ből kilépés

Rel attribútum - Link kapcsolat típusa

A rel (relationship) attribútum meghatározza a jelenlegi oldal és a hivatkozott dokumentum közötti kapcsolatot.

HTML - Rel attribútumok

<!-- Biztonságos külső link -->
<a href="https://external-site.com"
   target="_blank"
   rel="noopener noreferrer">
  Külső oldal
</a>

<!-- SEO: ne kövesse a link juice-t -->
<a href="https://untrusted-site.com"
   rel="nofollow">
  Nem megbízható oldal
</a>

<!-- Szponzorált link -->
<a href="https://sponsor.com"
   rel="sponsored">
  Szponzor
</a>

Rel érték	Jelentés	Használat
`noopener`	Biztonsági védelem	Új ablak nem fér hozzá az eredeti oldalhoz
`noreferrer`	Referrer elrejtés	Nem küld referrer információt
`nofollow`	SEO: ne kövesse	Nincs link juice átadás (keresők nem követik)
`sponsored`	Fizetett tartalom	Szponzorált/hirdetési linkek
`ugc`	User Generated Content	Felhasználók által készített tartalom

Biztonsági figyelmeztetés

target="_blank" használatakor MINDIG add hozzá a rel="noopener noreferrer" attribútumokat!

Nélkülük az új ablak hozzáférhet az eredeti oldalhoz a window.opener objektumon keresztül, ami biztonsági kockázat.

Élő példa - Különböző link típusok:

Külső link (új ablak)

Oldalon belüli link (vissza a tetejére)

Belső link (blog főoldal)

Belső linkek - Saját weboldalon belüli navigáció EMELT SZINT

A belső linkek ugyanazon a domain-en belül navigálnak. Nem szükséges target="_blank" vagy biztonsági attribútumok.

HTML - Belső linkek

<!-- Navigáció más oldalakra -->
<nav>
  <ul>
    <li><a href="index.html">Főoldal</a></li>
    <li><a href="about.html">Rólunk</a></li>
    <li><a href="contact.html">Kapcsolat</a></li>
  </ul>
</nav>

Anchorok - Oldalon belüli hivatkozások EMELT SZINT

Az anchorok (horgonyok) lehetővé teszik, hogy egy oldal különböző szakaszaira ugorj. A # jellel kezdődő href egy ID-ra mutat.

Anchor létrehozása

Két lépésben készíthetsz oldalon belüli hivatkozást:

Célpont megjelölése: Adj ID-t az elemnek, ahova ugrani szeretnél
Link létrehozása: Használj #id formátumú href-et

HTML - Oldalon belüli hivatkozások

<!-- 1. Tartalomjegyzék a tetején -->
<nav>
  <h2>Tartalomjegyzék</h2>
  <ul>
    <li><a href="#bevezetes">Bevezetés</a></li>
    <li><a href="#telepites">Telepítés</a></li>
    <li><a href="#hasznalat">Használat</a></li>
    <li><a href="#osszefoglalas">Összefoglalás</a></li>
  </ul>
</nav>

<!-- 2. Szakaszok ID-kkal -->
<section id="bevezetes">
  <h2>Bevezetés</h2>
  <p>Tartalom...</p>
</section>

<section id="telepites">
  <h2>Telepítés</h2>
  <p>Tartalom...</p>
</section>

<section id="hasznalat">
  <h2>Használat</h2>
  <p>Tartalom...</p>
</section>

<section id="osszefoglalas">
  <h2>Összefoglalás</h2>
  <p>Tartalom...</p>
</section>

<!-- Vissza a tetejére link -->
<a href="#top">↑ Vissza a tetejére</a>

Anchor szabályok

Az ID egyedi kell legyen az egész oldalon
Az ID nem tartalmazhat szóközt
Ajánlott kisbetűk és kötőjelek használata (pl. id="uj-szakasz")
A #top anchor a body elemre mutat (ha nincs is id="top")
Üres href="#" az oldal tetejére ugrik

Élő példa - Próbáld ki!

Ugorj az oldal tetejére:

↑ Vissza a tetejére (top)

↓ Ugrás az "Anchor létrehozása" szakaszhoz

Más oldal adott szakaszára hivatkozás

Kombinálhatod a fájl útvonalát és az anchor-t:

HTML - Másik oldal + anchor

<!-- Ugrás a kapcsolat.html oldalon az űrlap szakaszhoz -->
<a href="contact.html#urlap">Lépj kapcsolatba velünk</a>

<!-- Külső oldal adott szakasza -->
<a href="https://example.com/page.html#section3">
  3. szakasz az example.com oldalon
</a>

Relatív és abszolút útvonalak EMELT SZINT

Az útvonalak megadásának két fő módja van: relatív és abszolút útvonalak.

Abszolút útvonalak (Absolute paths)

Az abszolút útvonal a teljes URL-t tartalmazza, a protokolltól (http/https) kezdve.

HTML - Abszolút útvonalak

<!-- Teljes URL protokollal -->
<a href="https://www.example.com/pages/about.html">
  Rólunk
</a>

<!-- Képek is használhatnak abszolút útvonalat -->
<img src="https://www.example.com/images/logo.png"
     alt="Logo">

<!-- CSS fájl -->
<link rel="stylesheet"
      href="https://cdn.example.com/styles.css">

Mikor használj abszolút útvonalat?

✅ Külső oldalakra hivatkozáskor (más domain)
✅ CDN-ről betöltött erőforrások (pl. jQuery)
✅ API végpontok esetén
✅ Email-ekben lévő linkek
❌ Saját oldaladon belüli navigációhoz (használj relatívat!)

Relatív útvonalak (Relative paths)

A relatív útvonal a jelenlegi fájlhoz képest adja meg a cél elérési útját.

HTML - Relatív útvonalak

<!-- Ugyanabban a mappában -->
<a href="about.html">Rólunk</a>

<!-- Almappában -->
<a href="pages/contact.html">Kapcsolat</a>
<img src="images/logo.png" alt="Logo">

<!-- Egy szinttel feljebb (..) -->
<a href="../index.html">Főoldal</a>

<!-- Két szinttel feljebb -->
<a href="../../main.html">Vissza</a>

<!-- Gyökér könyvtárból (/) -->
<a href="/about.html">Rólunk</a>
<link rel="stylesheet" href="/css/style.css">

Relatív útvonal példák - Könyvtárszerkezet

Nézzünk egy valós példát a mappahierarchiával:

Könyvtárszerkezet

website/
├── index.html
├── about.html
├── css/
│   └── style.css
├── images/
│   ├── logo.png
│   └── photo.jpg
└── pages/
    ├── blog.html
    ├── contact.html
    └── gallery/
        └── album.html

HTML - Relatív útvonalak példa

<!-- index.html fájlból -->
<a href="about.html">Rólunk</a>
<a href="pages/blog.html">Blog</a>
<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">

<!-- pages/blog.html fájlból -->
<a href="../index.html">Főoldal</a>
<a href="../about.html">Rólunk</a>
<a href="contact.html">Kapcsolat</a>
<img src="../images/logo.png" alt="Logo">

<!-- pages/gallery/album.html fájlból -->
<a href="../../index.html">Főoldal</a>
<a href="../blog.html">Blog</a>
<img src="../../images/photo.jpg" alt="Fotó">

Útvonal típus	Szintaxis	Jelentés
Ugyanaz a mappa	`file.html`	Ugyanabban a könyvtárban
Almappa	`folder/file.html`	Almappában lévő fájl
Szülő mappa	`../file.html`	Egy szinttel feljebb
Gyökérből	`/folder/file.html`	A weboldal gyökeréből indul

Mikor használj relatív útvonalat?

✅ Saját oldaladon belüli navigációhoz
✅ Helyi fejlesztés során (működik bármilyen domain-en)
✅ Képek, CSS, JS fájlok beágyazásához
✅ Hordozható projektek (könnyen áthelyezhető)

Relatív vs Abszolút - Összehasonlítás

HTML - Relatív vs Abszolút példa

<!-- ABSZOLÚT útvonalak -->
<!-- Előny: Mindig ugyanarra mutat -->
<!-- Hátrány: Domain változtatáskor át kell írni -->
<a href="https://www.example.com/about.html">Rólunk</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">

<!-- RELATÍV útvonalak -->
<!-- Előny: Hordozható, domain független -->
<!-- Hátrány: Fájl áthelyezéskor frissíteni kell -->
<a href="about.html">Rólunk</a>
<img src="images/logo.png" alt="Logo">

<!-- GYÖKÉR RELATÍV útvonalak (/) -->
<!-- Előny: Domain független, de gyökérből indul -->
<!-- Hátrány: Helyi fejlesztésnél problémás lehet -->
<a href="/about.html">Rólunk</a>
<img src="/images/logo.png" alt="Logo">

További link attribútumok EMELT SZINT

Download attribútum

A download attribútum arra utasítja a böngészőt, hogy töltse le a fájlt megnyitás helyett:

HTML - Download attribútum

<!-- Fájl letöltése eredeti névvel -->
<a href="document.pdf" download>PDF letöltése</a>

<!-- Fájl letöltése egyedi névvel -->
<a href="document.pdf" download="utmutato.pdf">
  Útmutató letöltése
</a>

<!-- Kép letöltése -->
<a href="images/photo.jpg" download="emlék.jpg">
  Kép letöltése
</a>

Title attribútum - Tooltip

A title attribútum tooltip-et jelenít meg, amikor a felhasználó a link fölé viszi az egeret:

HTML - Title attribútum

<a href="about.html"
   title="Tudj meg többet rólunk">
  Rólunk
</a>

<a href="https://external-site.com"
   title="Külső oldal - új ablakban nyílik meg"
   target="_blank"
   rel="noopener noreferrer">
  Külső link
</a>

Élő példa - Vidd rá az egeret a linkre:

Vidd rá az egeret erre a linkre

Email és telefonos linkek EMELT SZINT

Mailto link - Email küldés

HTML - Mailto link

<!-- Egyszerű email link -->
<a href="mailto:info@example.com">Írj nekünk</a>

<!-- Email tárggyal -->
<a href="mailto:info@example.com?subject=Kérdés">
  Email tárggyal
</a>

<!-- Email tárggyal és üzenet törzzsel -->
<a href="mailto:info@example.com?subject=Ajánlatkérés&body=Üdvözlöm,%0A%0AKérnék egy árajánlatot...">
  Ajánlatot kérek
</a>

<!-- Több címzett -->
<a href="mailto:info@example.com,support@example.com">
  Email több címzettnek
</a>

Élő példa - Email link:

Írj nekünk email-t

Tel link - Telefonhívás

HTML - Tel link

<!-- Telefonhívás link -->
<a href="tel:+36301234567">+36 30 123 4567</a>

<!-- Nemzetközi formátum -->
<a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>

Tel és mailto linkek

Mobilon működik legjobban - automatikusan megnyitja az email/telefon appot
Asztali gépen az alapértelmezett email kliens/VoIP program nyílik meg
Akadálymentesség szempontjából hasznos

Gyakori hibák és legjobb gyakorlatok EMELT SZINT

Kerülendő hibák

❌ "Kattints ide" szöveg: Nem informatív, helyette: "Töltsd le az útmutatót"
❌ Üres href: href="" vagy href="#" JavaScript nélkül
❌ target="_blank" biztonság nélkül: Mindig használd a rel="noopener noreferrer" attribútumokat!
❌ Abszolút útvonalak mindenhol: Saját oldalon használj relatívat
❌ Túl hosszú URL-ek: Használj URL rövidítőt vagy relatív útvonalat

Legjobb gyakorlatok

✅ Beszédes link szöveg: "Töltsd le a PDF útmutatót" > "Kattints ide"
✅ Külső linkek jelzése: Jelezd vizuálisan, ha új ablakban nyílik
✅ Biztonság: Külső linkeknél mindig rel="noopener noreferrer"
✅ SEO: Használj nofollow-t nem megbízható tartalmakhoz
✅ Akadálymentesség: A link célja legyen egyértelmű a szövegből

Összefoglalás

Ebben a cikkben megismerkedtél a HTML hivatkozások használatával:

A elem: Hivatkozások létrehozása href attribútummal
Külső linkek: target="_blank" és rel="noopener noreferrer" biztonsággal
Belső linkek: Saját oldalakon belüli navigáció
Anchorok: Oldalon belüli ugrás ID-kkal (#szakasz)
Relatív útvonalak: Jelenlegi fájlhoz képest (../folder/file.html)
Abszolút útvonalak: Teljes URL (https://example.com/page.html)
Speciális linkek: mailto, tel, download attribútumok

Példák a weboldalunkon

Nézd meg, hogyan használjuk a hivatkozásokat a gyakorlatban:

Főoldal header - Navigációs menü belső linkekkel
Breadcrumbs navigáció - Relatív útvonalak használata
Blog oldalsáv - Anchor linkek a tartalomjegyzékhez
Footer - Külső linkek rel attribútumokkal

Következő lépések

Gyakorold az itt tanultakat: készíts egy navigációs menüt belső linkekkel, egy tartalomjegyzéket anchorokkal, és próbáld ki a különböző link típusokat!

Következő cikk: Táblázatok HTML-ben - Ismerd meg a táblázatok strukturálását: thead, tbody, tfoot elemek, colspan és rowspan attribútumok. Készíts professzionális árlistákat és összehasonlító táblázatokat!