Kapitel 6: HTML-Link-Tags

🔗 Lernziel: Links erstellen und SEO-optimieren - die Verbindung zwischen Webseiten!

6.1 a-Tag Kernattribut: href (Linkziel)

Das <a>-Tag erstellt Hyperlinks.

Grundlegende Syntax:

html

<a href="url">Linktext</a>

href-Attribut (Hypertext Reference):

Linktyp	Beispiel	Verwendung
Absoluter Link	`href="https://www.example.com"`	Externe Webseiten
Relativer Link	`href="ueber-uns.html"`	Eigene Seiten im selben Ordner
Verzeichnis-Link	`href="seiten/kontakt.html"`	Eigene Seiten in Unterordnern
Root-relative Link	`href="/seiten/index.html"`	Von Wurzelverzeichnis aus

Beispiele:

html

<!-- Externer Link -->
<a href="https://www.google.de">Zu Google</a>

<!-- Interner Link -->
<a href="kontakt.html">Kontaktiere uns</a>

<!-- Link zu Unterseite -->
<a href="blog/artikel1.html">Lies unseren Artikel</a>

6.2 target-Attribut

Das target-Attribut bestimmt, wo der Link geöffnet wird.

Wert	Effekt	Verwendung
`_self`	Im aktuellen Fenster (Standard)	Normale Navigation
`_blank`	In neuem Tab/Fenster	Externe Links empfohlen
`_parent`	Im übergeordneten Frame	Frameset (veraltet)
`_top`	Im gesamten Fenster	Frameset (veraltet)

Beispiel:

html

<!-- Öffnet in neuem Tab (empfohlen für externe Links) -->
<a href="https://www.example.com" target="_blank">Externe Seite</a>

<!-- Öffnet im aktuellen Fenster (Standard) -->
<a href="seite2.html" target="_self">Interne Seite</a>

SEO-Tipp:

Externe Links: target="_blank" + rel="noopener noreferrer"

html

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

Anker-Links ermöglichen Sprünge innerhalb einer Seite.

Schritt 1: Ziel definieren (id hinzufügen)

html

<h2 id="abschnitt1">Abschnitt 1</h2>

Schritt 2: Link zum Ziel erstellen

html

<a href="#abschnitt1">Zu Abschnitt 1 springen</a>

Vollständiges Beispiel:

html

<!-- Navigationslinks oben -->
<nav>
  <a href="#einleitung">Einleitung</a> |
  <a href="#hauptteil">Hauptteil</a> |
  <a href="#fazit">Fazit</a>
</nav>

<!-- Seiteninhalte -->
<h2 id="einleitung">Einleitung</h2>
<p>Hier ist die Einleitung...</p>

<h2 id="hauptteil">Hauptteil</h2>
<p>Hier ist der Hauptteil...</p>

<h2 id="fazit">Fazit</h2>
<p>Hier ist das Fazit...</p>

Tipp: Perfekt für lange Seiten (Inhaltsverzeichnis)!

6.4 Leere Links, Download-Links, E-Mail- und Telefon-Links

Leere Links (Placeholder)

html

<!-- Tipp: Verwende # für Platzhalter (vermeide javascript:void(0)) -->
<a href="#">Noch nicht verfügbar</a>

Download-Links

html

<!-- Datei zum Download anbieten -->
<a href="dokument.pdf" download>PDF herunterladen</a>
<a href="programm.zip" download="mein-programm.zip">ZIP herunterladen</a>

E-Mail-Links (mailto:)

html

<a href="mailto:info@example.com">E-Mail senden</a>
<a href="mailto:info@example.com?subject=Anfrage&body=Hallo">E-Mail mit Betreff</a>

Telefon-Links (tel:)

html

<a href="tel:+49123456789">Jetzt anrufen: 0123 456 789</a>

6.5 SEO-Optimierung: Link-Anchor-Text

Der Anchor-Text (der sichtbare Text eines Links) ist wichtig für SEO.

❌ Schlecht für SEO:

html

<!-- Zu generisch -->
<a href="seite.html">Klicke hier</a>
<a href="seite.html">Mehr lesen</a>

✅ Gut für SEO:

html

<!-- Beschreibend -->
<a href="seo-tipps.html">Die besten SEO-Tipps für 2026</a>
<a href="html-tutorial.html">HTML-Tutorial für Anfänger</a>

SEO-Regeln für Links:

Verwende beschreibenden Text (nicht "hier klicken")
Vermeide zu lange Anchor-Texte (max. 5-8 Wörter)
Verwende relevante Keywords im Anchor-Text
Interne Links fördern SEO (verlinke eigene Seiten)

6.6 Praxis: Navigationslinks und Anker-Links erstellen

Aufgabe: Erstelle eine Seite mit Navigation und Anker-Links.

Lösung:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite mit Navigation</title>
</head>
<body>
  <!-- Navigation -->
  <nav>
    <a href="#about">Über mich</a> | 
    <a href="#services">Leistungen</a> | 
    <a href="#contact">Kontakt</a> | 
    <a href="impressum.html">Impressum</a> | 
    <a href="https://www.google.de" target="_blank" rel="noopener noreferrer">Suche</a>
  </nav>
  
  <hr>
  
  <!-- Seiteninhalt -->
  <h2 id="about">Über mich</h2>
  <p>Ich bin ein Webentwickler...</p>
  <p>Mehr Text hier...</p>
  
  <h2 id="services">Leistungen</h2>
  <p>Ich biete Webdesign an...</p>
  
  <h2 id="contact">Kontakt</h2>
  <p>E-Mail: <a href="mailto:info@example.com">info@example.com</a></p>
  <p>Telefon: <a href="tel:+49123456789">0123 456 789</a></p>
  
  <!-- Zurück nach oben -->
  <p><a href="#">↑ Nach oben</a></p>
</body>
</html>

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Das <a>-Tag und das href-Attribut
✅ target="_blank" für neue Tabs
✅ Anker-Links für seiteninterne Navigation
✅ Download-, E-Mail- und Telefon-Links
✅ SEO-optimierte Anchor-Texte
✅ Eine Navigationsleiste zu erstellen

🎯 Nächster Schritt: In Kapitel 7 lernst du Listen-Tags!

← Zurück zu Kapitel 5: Bild-TagsWeiter zu Kapitel 7: Listen-Tags →

Kapitel 6: HTML-Link-Tags ​

6.1 a-Tag Kernattribut: href (Linkziel) ​

6.2 target-Attribut ​

6.3 Anker-Links (Seiteninterne Navigation) ​

6.4 Leere Links, Download-Links, E-Mail- und Telefon-Links ​

Leere Links (Placeholder) ​

Download-Links ​

E-Mail-Links (mailto:) ​

Telefon-Links (tel:) ​

6.5 SEO-Optimierung: Link-Anchor-Text ​

6.6 Praxis: Navigationslinks und Anker-Links erstellen ​

✅ Zusammenfassung ​

Kapitel 6: HTML-Link-Tags

6.1 a-Tag Kernattribut: href (Linkziel)

6.2 target-Attribut

6.3 Anker-Links (Seiteninterne Navigation)

6.4 Leere Links, Download-Links, E-Mail- und Telefon-Links

Leere Links (Placeholder)

Download-Links

E-Mail-Links (mailto:)

Telefon-Links (tel:)

6.5 SEO-Optimierung: Link-Anchor-Text

6.6 Praxis: Navigationslinks und Anker-Links erstellen

✅ Zusammenfassung