# 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:

1. Célpont megjelölése: Adj ID-t az elemnek, ahova ugrani szeretnél
2. 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!