Verwendung von Links in HTML

Links sind eines der wichtigsten Bauelemente des Webs. Sie ermöglichen es uns, Seiten zu verbinden, externe Quellen zu öffnen, E-Mails zu senden oder Downloads auszulösen.

Einen einfachen Link erstellen

Der einfachste Link ist ein <a>-Tag, das mit dem href-Attribut die Ziel-URL angibt. Der Linktext steht zwischen dem öffnenden und schließenden Tag.

html

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

Links in einem neuen Tab öffnen

Das Attribut target="_blank" öffnet den Link in einem neuen Browser-Tab oder -Fenster. Das ist besonders nützlich für externe Seiten.

html

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

Interne Links

Bei internen Links verweist das href-Attribut auf eine lokale Datei oder einen Pfad innerhalb derselben Website.

html

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

E-Mail-Links

Ein E-Mail-Link beginnt mit dem Präfix mailto:, gefolgt von der E-Mail-Adresse.

html

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

Links als Schaltflächen gestalten

Ein <a>-Element kann mit CSS wie eine Schaltfläche gestaltet werden. Dies ist eine gängige Technik für Call-to-Action-Buttons (CTA).

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>

Das rel-Attribut

Wenn ein Link in einem neuen Tab geöffnet wird, sollte rel="noopener noreferrer" verwendet werden, um die Sicherheit des Browsers zu erhöhen.

html

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

Zusammenfassung

Links sind einfache, aber leistungsstarke Werkzeuge in HTML. Sie dienen zur Navigation, zum Auslösen von Downloads, zum Verlinken von E-Mails oder zum Erstellen von Navigationsstrukturen. Attribute wie href, target und rel helfen bei der Anpassung ihres Verhaltens und Aussehens.