HTML Links & Navigation

🔗 Links - Das Herz des World Wide Web

Links (auch "Hyperlinks" oder "Anchor-Tags" genannt) sind das, was das Web zum "Web" macht. Sie verbinden Seiten miteinander.

Der <a> Tag

Der <a> (anchor) Tag erstellt Links. Das wichtigste Attribut ist href (Hypertext Reference).

<!-- Einfacher Link -->
<a href="https://www.example.com">Besuche Example.com</a>

<!-- Link in neuem Tab öffnen -->
<a href="https://www.example.com" target="_blank">Öffnet in neuem Tab</a>

<!-- Link zu anderer Seite auf gleicher Website -->
<a href="/about.html">Über uns</a>
<a href="./kontakt.html">Kontakt</a>

Link-Attribute im Detail

href - Das Ziel des Links

• Absolute URL: https://www.example.com - Vollständige Adresse
• Relative URL: /about.html oder ./about.html - Relativ zur aktuellen Seite
• Anker-Link: #id - Springt zu einem Element mit dieser ID
• Protokoll-Links:
  • mailto: - Öffnet E-Mail-Programm
  • tel: - Wählt Telefonnummer (mobil)

<!-- Anker-Link -->
<a href="#abschnitt1">Springe zu Abschnitt 1</a>
<h2 id="abschnitt1">Abschnitt 1</h2>

<!-- E-Mail Link -->
<a href="mailto:info@example.com">Schreib uns</a>

<!-- Telefon Link -->
<a href="tel:+491234567890">+49 123 4567890</a>

<!-- Download Link -->
<a href="dokument.pdf" download>PDF herunterladen</a>

target - Wo soll der Link öffnen

• target="_blank" - Neuer Tab/Fenster
• target="_self" - Gleiches Fenster (Standard)
• target="_parent" - Übergeordnetes Frame
• target="_top" - Gesamtes Fenster

rel - Beziehung zum verlinkten Dokument

• rel="noopener" - Sicherheit bei target="_blank"
• rel="nofollow" - Suchmaschinen sollen nicht folgen
• rel="noreferrer" - Kein Referrer übergeben

<!-- Sicherer externer Link -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
    Externe Seite
</a>

download - Lädt Datei herunter

<!-- Verwendet Original-Dateinamen -->
<a href="dokument.pdf" download>Download</a>

<!-- Setzt Download-Namen -->
<a href="dokument.pdf" download="mein-dokument.pdf">Download</a>

Navigation erstellen

Eine typische Navigation verwendet Listen und Links zusammen:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">Über uns</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Kontakt</a></li>
    </ul>
</nav>

Best Practices

✅ Gute Link-Texte

Gut: "Lade die Anleitung herunter"
Schlecht: "Klicke hier"

Der Link-Text sollte beschreiben, wohin der Link führt.

✅ Externe Links

Für externe Links immer:

<a href="https://external.com" target="_blank" rel="noopener noreferrer">
    Externe Seite
</a>

Das rel="noopener noreferrer" ist wichtig für Sicherheit!

✅ Barrierefreiheit

• Links sollten auch ohne Kontext verständlich sein
• Nutze aria-label für Icon-Links
• Links sollten sich vom Text abheben (Farbe, Unterstreichung)

<!-- Icon-Link mit aria-label -->
<a href="/settings" aria-label="Zu den Einstellungen">
    ⚙️
</a>

✅ SEO (Suchmaschinenoptimierung)

Suchmaschinen bewerten:

• Link-Texte (nicht "hier klicken")
• Interne Verlinkung
• rel Attribute

Häufige Fehler

❌ Falsch: Link ohne href

<a>Kein Ziel</a>

✅ Richtig:

<a href="/page">Mit Ziel</a>

❌ Falsch: Button als Link missbrauchen

<a href="#">
    <button>Klick mich</button>
</a>

✅ Richtig:

<a href="/page" class="button-style">Klick mich</a>
<!-- ODER -->
<button onclick="location.href='/page'">Klick mich</button>

Verschiedene Link-Typen

<!-- Normaler Link -->
<a href="/page">Interne Seite</a>

<!-- E-Mail -->
<a href="mailto:info@example.com?subject=Anfrage">E-Mail schreiben</a>

<!-- Telefon -->
<a href="tel:+491234567890">Anrufen</a>

<!-- SMS -->
<a href="sms:+491234567890">SMS senden</a>

<!-- WhatsApp -->
<a href="https://wa.me/491234567890">WhatsApp</a>

html {
    scroll-behavior: smooth;
}

<a href="/downloads/guide.pdf" title="PDF, 2.5 MB">
    Handbuch herunterladen
</a>

document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.rel = 'noopener noreferrer';
});

nav a.active {
    font-weight: bold;
    border-bottom: 2px solid blue;
}

<a href="#main" class="skip-link">
    Zum Hauptinhalt springen
</a>

.skip-link {
    position: absolute;
    top: -40px;
}
.skip-link:focus {
    top: 0;
}

Zusammenfassung

• <a> erstellt Links
• href definiert das Ziel
• target="_blank" öffnet in neuem Tab
• Immer rel="noopener noreferrer" bei externen Links
• Beschreibende Link-Texte verwenden
• Links sind essentiell für Navigation und SEO