Navigation, Quellenangaben, verwandte Artikel – HTML Links verbinden alles! Interne Links stärken deine Seitenstruktur, externe Links zeigen Quellen. In diesem Tutorial lernst du beide richtig zu nutzen.
Einführung in das HTML Interne und externe Links Tutorial
Was sind interne und externe Links
- Interne Links: Verbinden Seiten auf DEINER Website (z.B. /kontakt)
- Externe Links: Führen zu ANDEREN Websites (z.B. https://wikipedia.org)
Unterschiede auf einen Blick
- Intern: Relative Pfade möglich (
/kontakt) - Extern: Immer vollständige URL mit
https:// - Intern: Öffnet im selben Tab
- Extern: Oft in neuem Tab (
target="_blank")
Warum Links wichtig sind
Links sind das Rückgrat des Internets:
- Navigation für Nutzer
- Crawling für Suchmaschinen
- SEO-Signale (interne Verlinkung!)
Voraussetzungen
Grundlegende HTML-Kenntnisse
Du solltest HTML-Grundlagen verstehen. Falls nicht, hol das kurz nach!
Benötigte Tools
Texteditor und Browser – mehr brauchst du nicht.
Schritt-für-Schritt-Anleitung
Schritt 1: Externe Links erstellen
<!-- Externer Link -->
<a href="https://www.wikipedia.org">Besuche Wikipedia</a>
<!-- In neuem Tab öffnen -->
<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
Wichtig: Bei target="_blank" immer rel="noopener" für Sicherheit!
Schritt 2: Interne Links zwischen Seiten
<!-- Relativer Pfad (empfohlen) -->
<a href="kontakt.html">Kontakt</a>
<a href="/impressum">Impressum</a>
<!-- Zu Unterordner -->
<a href="blog/artikel1.html">Erster Blogartikel</a>
<!-- Eine Ebene hoch -->
<a href="../index.html">Zurück zur Startseite</a>
Schritt 3: Sprungmarken (Anker-Links)
Für Navigation INNERHALB einer Seite:
<!-- Zielelemente mit ID -->
<h2 id="kapitel-eins">Erstes Kapitel</h2>
<h2 id="kapitel-zwei">Zweites Kapitel</h2>
<!-- Links zu den Sprungmarken -->
<nav>
<a href="#kapitel-eins">Zu Kapitel 1</a>
<a href="#kapitel-zwei">Zu Kapitel 2</a>
<a href="#top">Nach oben</a>
</nav>
Schritt 4: Target-Attribut richtig verwenden
_self(Standard): Öffnet im selben Tab_blank: Öffnet in neuem Tab (für externe Links)
REGEL: Interne Links = selber Tab
Externe Links = neuer Tab + rel="noopener"Code-Beispiele zu HTML
Navigation mit internen Links
<nav>
<a href="/">Startseite</a>
<a href="/produkte">Produkte</a>
<a href="/ueber-uns">Über uns</a>
<a href="/kontakt">Kontakt</a>
</nav>
Externe Links mit Beschreibung
<p>
Mehr Infos findest du bei
<a href="https://developer.mozilla.org"
target="_blank"
rel="noopener"
title="MDN Web Docs - Entwickler-Dokumentation">
MDN Web Docs
</a>.
</p>
Das title-Attribut zeigt einen Tooltip beim Hover!
Häufige Fehler & Troubleshooting
Fehler 1: Protokoll vergessen
FALSCH: <a href="www.example.com"> → wird als interne Datei gesucht!
RICHTIG: <a href="https://www.example.com">Fehler 2: Groß-/Kleinschreibung bei Dateien
Linux-Server unterscheiden zwischen Kontakt.html und kontakt.html!
Fehler 3: Tote Links
Regelmäßig prüfen:
- Browser-Konsole auf 404-Fehler
- Nach Umstrukturierungen alle Links testen
HTML: Best Practices & Tipps
SEO-optimierte Links
- Aussagekräftige Linktexte: "HTML Tutorial lesen" statt "hier klicken"
- Interne Verlinkung: Thematisch verwandte Inhalte verbinden
- Externe Links: Auf hochwertige Quellen verweisen
Barrierefreie Links
- Beschreibende Linktexte (Screenreader lesen sie vor)
title-Attribut für zusätzliche Infos- Fokus-Indikator nie mit CSS verstecken!
Performance
<!-- Für externe Links: noopener verhindert Performance-Probleme -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>
Fazit zum HTML-Tutorial: Was hast du hier gelernt
Du kennst jetzt den Unterschied zwischen internen und externen Links:
- Interne Links: Relative Pfade, selber Tab
- Externe Links: Vollständige URL, neuer Tab +
rel="noopener" - Sprungmarken:
idam Ziel,#idim Link
Mit guter Verlinkung verbesserst du Navigation, SEO und Nutzerfreundlichkeit!
Bereit für mehr? Lerne als Nächstes, wie du HTML Responsive Bilder mit srcset erstellst!