Loading...

HTML linkek használata

A linkek a web egyik legfontosabb építőelemei. Segítségükkel összekapcsolhatjuk az oldalakat, külső forrásokat, e-maileket vagy akár letöltéseket is elérhetünk.

Alap link létrehozása

A legegyszerűbb link egy <a> tag, amely a href attribútummal kapja meg a cél URL-t. A link szövege a tag nyitó és záró része között helyezkedik el.

html

<a href="https://www.example.com">Visit Example</a>

Link megnyitása új lapon

A target="_blank" attribútummal a link új böngészőfülön vagy ablakban nyílik meg. Ez hasznos külső oldalak esetén.

html

<a href="https://www.example.com" target="_blank">Open in new tab</a>

Belső linkek

Belső linkek esetén a href értéke egy helyi fájl vagy útvonal, amely ugyanazon weboldalon található.

html

<a href="/about.html">About Us</a>

Email linkek

Az email küldésre szolgáló link a mailto: előtaggal kezdődik, és az e-mail címet tartalmazza.

html

<a href="mailto:[email protected]">Email us</a>

Gombként kinéző linkek

Egy <a> elem CSS-sel formázható úgy, hogy gombnak tűnjön. Ez gyakran használt technika akciógombok (CTA) esetén.

html

<a href="/contact.html" style="display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">
  Contact Us
</a>

rel attribútum jelentése

Ha új lapon nyitod meg a linket, érdemes a rel="noopener noreferrer" attribútumot is megadni, hogy biztonságosabb legyen a kapcsolat a böngésző szempontjából.

html

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Secure External Link</a>

Összegzés

A linkek egyszerűek, mégis hatékony eszközök a HTML-ben. Használhatjuk őket más oldalakra mutató hivatkozásként, letöltésekhez, e-mailekhez vagy akár navigációhoz is. A különböző attribútumok – mint a href, target vagy rel – segítségével testre szabhatjuk a működésüket és megjelenésüket.

Kövesd nyomon a fejlődésed 🚀

Tanulj egyszerűbben utad nyomonkövetésével teljesen ingyen.


Top eszközök

CodeHubBoardly ÚJLinksy ÚJChromo ÚJ

Nyelv kiválasztása

Téma beállítása

© 2025 ReadyTools. Minden jog fenntartva.