Meistern Sie HTML-Links und Anker mit diesem umfassenden Leitfaden. Lernen Sie über Hyperlinks, absolute vs. relative URLs, Anker-Links und Styling für Benutzerfreundlichkeit.
<a> erstellenDas Anker-Element (<a>) wird verwendet, um Hyperlinks zu erstellen, die zu anderen Seiten, Dateien, E-Mail-Adressen, Stellen innerhalb derselben Seite oder jeder anderen URL verbinden.
<a href="ziel">Link-Text</a>
Komponenten:
<a> - Das Anker-Elementhref - Die Hypertext-Referenz (Ziel)</a> - Schließender Tag<!-- Link zu einer anderen Website -->
<a href="https://www.beispiel.com">Besuchen Sie Beispiel.com</a>
<!-- Link zu einer anderen Seite auf Ihrer Website -->
<a href="ueber.html">Über uns</a>
<!-- Link zu einem Abschnitt auf derselben Seite -->
<a href="#kontakt">Kontakt-Abschnitt</a>
<!-- E-Mail-Link -->
<a href="mailto:hallo@beispiel.com">Senden Sie uns eine E-Mail</a>
<!-- Telefon-Link -->
<a href="tel:+1234567890">Rufen Sie uns an: (123) 456-7890</a>
Das <a>-Element unterstützt mehrere wichtige Attribute:
<a href="https://beispiel.com"
target="_blank"
rel="noopener noreferrer"
title="Besuchen Sie Beispiel.com - öffnet in neuem Tab"
download="dateiname.pdf">
Link-Text
</a>
Wichtige Attribute:
href - Die Ziel-URLtarget - Wo der Link geöffnet werden sollrel - Beziehung zwischen aktuellem und verlinktem Dokumenttitle - Zusätzliche Informationen (Tooltip)download - Schlägt das Herunterladen der verlinkten Ressource vorDas Verständnis des Unterschieds zwischen absoluten und relativen URLs ist entscheidend für die Erstellung wartbarer Websites.
Absolute URLs enthalten die vollständige Webadresse:
<!-- Absolute URLs - Vollständige Webadressen -->
<a href="https://www.beispiel.com">Externe Seite</a>
<a href="https://www.ihreseite.com/ueber.html">Ihre Über-Seite</a>
<a href="http://www.alteseite.com">Nicht-sichere Seite</a>
Wann absolute URLs verwenden:
Vorteile:
Nachteile:
Relative URLs sind Pfade relativ zum Standort der aktuellen Seite:
<!-- Relative URLs - Pfade vom aktuellen Standort -->
<a href="ueber.html">Über-Seite (gleiches Verzeichnis)</a>
<a href="seiten/kontakt.html">Kontakt-Seite (Unterverzeichnis)</a>
<a href="../index.html">Startseite (übergeordnetes Verzeichnis)</a>
<a href="../../bilder/logo.png">Logo (zwei Ebenen höher)</a>
Aktuelle Seite: /blog/beitraege/artikel.html
ueber.html → /blog/beitraege/ueber.html
../ueber.html → /blog/ueber.html
../../ueber.html → /ueber.html
seiten/kontakt.html → /blog/beitraege/seiten/kontakt.html
/ueber.html → /ueber.html (wurzel-relativ)
Pfad-Symbole:
./ - Aktuelles Verzeichnis (optional)../ - Übergeordnetes Verzeichnis (eine Ebene höher)/ - Wurzelverzeichnis (von der Website-Wurzel)Wurzel-relative URLs beginnen vom Wurzelverzeichnis der Website:
<!-- Wurzel-relative URLs - Beginnen von der Website-Wurzel -->
<a href="/ueber.html">Über-Seite</a>
<a href="/blog/beitraege/artikel.html">Blog-Artikel</a>
<a href="/bilder/logo.png">Website-Logo</a>
Vorteile:
Verwenden Sie absolute URLs für:
Verwenden Sie relative URLs für:
Verwenden Sie wurzel-relative URLs für:
Das target-Attribut steuert, wo Links geöffnet werden. Verwenden Sie es sorgfältig, um eine gute Benutzererfahrung zu gewährleisten.
<!-- In gleichem Tab/Fenster öffnen (Standard) -->
<a href="ueber.html">Über uns</a>
<!-- In neuem Tab/Fenster öffnen -->
<a href="https://beispiel.com" target="_blank">Externe Seite</a>
<!-- In übergeordnetem Frame öffnen (für iframes) -->
<a href="seite.html" target="_parent">Übergeordneter Frame</a>
<!-- In oberster Fensterebene öffnen (bricht aus allen Frames aus) -->
<a href="seite.html" target="_top">Oberstes Fenster</a>
<!-- In benanntem Fenster/Tab öffnen -->
<a href="seite.html" target="meinFenster">Benanntes Fenster</a>
target="_blank"Beim Öffnen von Links in neuen Tabs sollten Sie immer Sicherheitsattribute einschließen:
<!-- Unsicher - Machen Sie das nicht -->
<a href="https://externe-seite.com" target="_blank">Externer Link</a>
<!-- Sicher - Schließen Sie immer rel-Attribute ein -->
<a href="https://externe-seite.com" target="_blank" rel="noopener noreferrer">
Externer Link
</a>
Sicherheitsattribute:
noopener - Verhindert, dass die neue Seite auf window.opener zugreiftnoreferrer - Verhindert die Weitergabe von Referrer-Informationennofollow - Teilt Suchmaschinen mit, dem Link nicht zu folgenGute Gründe für target="_blank":
Vermeiden Sie target="_blank" für:
<!-- Externe Links kennzeichnen -->
<a href="https://beispiel.com" target="_blank" rel="noopener">
Externe Seite <span class="externes-symbol">↗</span>
</a>
<!-- Klare Kennzeichnung bereitstellen -->
<a href="dokument.pdf" target="_blank" rel="noopener">
PDF herunterladen (öffnet in neuem Tab)
</a>
<!-- Title-Attribut für zusätzlichen Kontext verwenden -->
<a href="https://beispiel.com"
target="_blank"
rel="noopener"
title="Besuchen Sie Beispiel.com - öffnet in neuem Tab">
Beispiel-Seite
</a>
Anker-Links ermöglichen es Benutzern, zu bestimmten Abschnitten innerhalb derselben Seite oder anderen Seiten zu springen.
Schritt 1: Das Ziel mit einer ID erstellen
<h2 id="erste-schritte">Erste Schritte</h2>
<p>Dieser Abschnitt erklärt, wie Sie beginnen...</p>
<section id="erweiterte-themen">
<h2>Erweiterte Themen</h2>
<p>Dieser Abschnitt behandelt erweiterte Konzepte...</p>
</section>
Schritt 2: Zum Ziel verlinken
<!-- Link zu Abschnitt auf derselben Seite -->
<a href="#erste-schritte">Zu Erste Schritte springen</a>
<a href="#erweiterte-themen">Zu Erweiterte Themen gehen</a>
<!-- Link zu Abschnitt auf anderer Seite -->
<a href="tutorial.html#erste-schritte">Tutorial Erste Schritte</a>
<a href="/docs/api.html#authentifizierung">API-Authentifizierung</a>
<nav class="inhaltsverzeichnis">
<h2>Inhaltsverzeichnis</h2>
<ul>
<li><a href="#einleitung">Einleitung</a></li>
<li><a href="#grundkonzepte">Grundkonzepte</a>
<ul>
<li><a href="#html-elemente">HTML-Elemente</a></li>
<li><a href="#attribute">Attribute</a></li>
</ul>
</li>
<li><a href="#erweiterte-themen">Erweiterte Themen</a></li>
<li><a href="#fazit">Fazit</a></li>
</ul>
</nav>
<main>
<section id="einleitung">
<h2>Einleitung</h2>
<p>Willkommen zu diesem umfassenden Leitfaden...</p>
</section>
<section id="grundkonzepte">
<h2>Grundkonzepte</h2>
<p>Beginnen wir mit den Grundlagen...</p>
<h3 id="html-elemente">HTML-Elemente</h3>
<p>HTML-Elemente sind die Bausteine...</p>
<h3 id="attribute">Attribute</h3>
<p>Attribute bieten zusätzliche Informationen...</p>
</section>
<section id="erweiterte-themen">
<h2>Erweiterte Themen</h2>
<p>Lassen Sie uns nun komplexere Konzepte erkunden...</p>
</section>
<section id="fazit">
<h2>Fazit</h2>
<p>In diesem Leitfaden haben wir behandelt...</p>
</section>
</main>
Skip-Links helfen Benutzern mit Screenreadern, effizienter zu navigieren:
<body>
<!-- Skip-Link - normalerweise visuell versteckt -->
<a href="#haupt-inhalt" class="skip-link">Zum Hauptinhalt springen</a>
<header>
<nav>
<!-- Navigationsmenü -->
</nav>
</header>
<main id="haupt-inhalt">
<!-- Hauptinhalt beginnt hier -->
<h1>Seitentitel</h1>
<p>Hauptinhalt...</p>
</main>
</body>
Verbessern Sie Anker-Links mit sanftem Scrollen:
html {
scroll-behavior: smooth;
}
/* Oder spezifische Elemente ansprechen */
.sanftes-scrollen {
scroll-behavior: smooth;
}
Gutes Link-Styling verbessert die Benutzererfahrung und Barrierefreiheit.
CSS bietet mehrere Pseudo-Klassen für das Styling von Links:
/* Unbesuchte Links */
a:link {
color: #0066cc;
text-decoration: underline;
}
/* Besuchte Links */
a:visited {
color: #800080;
}
/* Hover-Zustand */
a:hover {
color: #004499;
text-decoration: none;
}
/* Focus-Zustand (Tastaturnavigation) */
a:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Aktiver Zustand (wird geklickt) */
a:active {
color: #cc0000;
}
/* Sauberes, modernes Link-Styling */
a {
color: #2563eb;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
a:hover,
a:focus {
color: #1d4ed8;
border-bottom-color: #1d4ed8;
}
a:focus {
outline: 2px solid #93c5fd;
outline-offset: 2px;
border-radius: 2px;
}
/* Button-Style-Links */
.button-link {
display: inline-block;
padding: 12px 24px;
background-color: #2563eb;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.button-link:hover,
.button-link:focus {
background-color: #1d4ed8;
color: white;
}
/* Externe Links */
a[href^="http"]:not([href*="ihreseite.com"])::after {
content: " ↗";
font-size: 0.8em;
opacity: 0.7;
}
/* E-Mail-Links */
a[href^="mailto:"]::before {
content: "✉ ";
opacity: 0.7;
}
/* Telefon-Links */
a[href^="tel:"]::before {
content: "📞 ";
opacity: 0.7;
}
/* Download-Links */
a[download]::after {
content: " ⬇";
font-size: 0.8em;
opacity: 0.7;
}
/* Ausreichenden Farbkontrast sicherstellen */
a {
color: #0066cc; /* Erfüllt WCAG AA-Standards */
}
/* Nicht nur auf Farbe verlassen */
a:hover {
text-decoration: underline;
background-color: #f0f8ff;
}
/* Focus-Indikatoren sichtbar machen */
a:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Sicherstellen, dass Links groß genug für Touch sind */
@media (max-width: 768px) {
a {
min-height: 44px;
display: inline-block;
padding: 8px;
}
}
<!-- Einfacher Download -->
<a href="dokument.pdf" download>PDF herunterladen</a>
<!-- Download mit benutzerdefiniertem Dateinamen -->
<a href="bericht-2025.pdf" download="Jahresbericht-2025.pdf">
Jahresbericht herunterladen
</a>
<!-- Verschiedene Dateitypen herunterladen -->
<a href="daten.csv" download>CSV-Daten herunterladen</a>
<a href="praesentation.pptx" download>Präsentation herunterladen</a>
<!-- Basis-E-Mail-Link -->
<a href="mailto:kontakt@beispiel.com">E-Mail senden</a>
<!-- E-Mail mit Betreff -->
<a href="mailto:support@beispiel.com?subject=Hilfe-Anfrage">
Support kontaktieren
</a>
<!-- E-Mail mit Betreff und Text -->
<a href="mailto:info@beispiel.com?subject=Anfrage&body=Hallo, ich möchte mehr wissen über...">
Anfrage senden
</a>
<!-- E-Mail mit CC und BCC -->
<a href="mailto:haupt@beispiel.com?cc=zweit@beispiel.com&bcc=archiv@beispiel.com&subject=Meeting">
Meeting planen
</a>
<!-- Basis-Telefon-Link -->
<a href="tel:+1234567890">Anrufen (123) 456-7890</a>
<!-- Internationales Format -->
<a href="tel:+44-20-7946-0958">UK-Büro anrufen</a>
<!-- SMS-Links -->
<a href="sms:+1234567890">SMS senden</a>
<a href="sms:+1234567890?body=Hallo, ich interessiere mich für Ihre Dienstleistungen">
Vorausgefüllte SMS senden
</a>
<!-- Links, die JavaScript auslösen -->
<a href="#" onclick="oeffneModal(); return false;">Modal öffnen</a>
<!-- Besser: Event-Listener verwenden -->
<a href="#" id="modal-ausloeser">Modal öffnen</a>
<script>
document.getElementById('modal-ausloeser').addEventListener('click', function(e) {
e.preventDefault();
oeffneModal();
});
</script>
<!-- Progressive Verbesserung -->
<a href="fallback-seite.html" class="modal-ausloeser">Modal öffnen</a>
<!-- Vermeiden: Generischer Link-Text -->
<p>Für weitere Informationen über unsere Dienstleistungen, <a href="services.html">klicken Sie hier</a>.</p>
<p>Sie können den Bericht <a href="bericht.pdf">hier</a> herunterladen.</p>
<!-- Gut: Beschreibender Link-Text -->
<p>Erfahren Sie mehr über <a href="services.html">unsere Webentwicklungsdienstleistungen</a>.</p>
<p>Laden Sie den <a href="bericht.pdf">Jahresbericht 2025 (PDF, 2,3MB)</a> herunter.</p>
<!-- Kontext für Screenreader bereitstellen -->
<a href="artikel.html" aria-label="Vollständigen Artikel lesen: HTML-Links verstehen">
Weiterlesen
</a>
<!-- Beschreibenden Text verwenden -->
<a href="kontakt.html">Unser Support-Team kontaktieren</a>
<!-- Verwandte Links gruppieren -->
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/ueber">Über</a></li>
<li><a href="/dienstleistungen">Dienstleistungen</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<!-- Wichtige Seiten vorladen -->
<link rel="preload" href="wichtige-seite.html" as="document">
<!-- Wahrscheinliche nächste Seiten prefetchen -->
<link rel="prefetch" href="naechste-seite.html">
<!-- DNS-Prefetch für externe Domains -->
<link rel="dns-prefetch" href="//externe-seite.com">
<!-- Schlecht -->
<a href="mehr-info.html">Hier klicken</a>
<a href="download.pdf">Hier</a>
<!-- Gut -->
<a href="mehr-info.html">Erfahren Sie mehr über unsere Preispläne</a>
<a href="download.pdf">Benutzerhandbuch herunterladen (PDF, 1,2MB)</a>
<!-- Vermeiden Sie Übernutzung von target="_blank" -->
<a href="ueber.html" target="_blank">Über uns</a>
<a href="dienstleistungen.html" target="_blank">Dienstleistungen</a>
<!-- Verwenden Sie target="_blank" selektiv -->
<a href="ueber.html">Über uns</a>
<a href="https://externe-seite.com" target="_blank" rel="noopener">
Externe Ressource
</a>
<!-- Vermeiden -->
<a href="#">Platzhalter-Link</a>
<a href="">Leerer Link</a>
<a href="javascript:void(0)">JavaScript-Link</a>
<!-- Besser -->
<button type="button">Interaktives Element</button>
<a href="echte-seite.html">Echtes Ziel</a>
<!-- Unsicher -->
<a href="https://externe-seite.com" target="_blank">Externer Link</a>
<!-- Sicher -->
<a href="https://externe-seite.com" target="_blank" rel="noopener noreferrer">
Externer Link
</a>
<nav class="haupt-navigation" aria-label="Hauptnavigation">
<ul>
<li><a href="/" aria-current="page">Startseite</a></li>
<li><a href="/ueber">Über</a></li>
<li><a href="/dienstleistungen">Dienstleistungen</a>
<ul class="untermenue">
<li><a href="/dienstleistungen/webdesign">Webdesign</a></li>
<li><a href="/dienstleistungen/entwicklung">Entwicklung</a></li>
<li><a href="/dienstleistungen/seo">SEO</a></li>
</ul>
</li>
<li><a href="/blog">Blog</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Startseite</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blog/html">HTML-Tutorials</a></li>
<li aria-current="page">Links und Anker</li>
</ol>
</nav>
<div class="social-links">
<a href="https://twitter.com/ihrhandle"
target="_blank"
rel="noopener noreferrer"
aria-label="Folgen Sie uns auf Twitter">
<svg><!-- Twitter-Symbol --></svg>
Twitter
</a>
<a href="https://facebook.com/ihreseite"
target="_blank"
rel="noopener noreferrer"
aria-label="Liken Sie uns auf Facebook">
<svg><!-- Facebook-Symbol --></svg>
Facebook
</a>
<a href="https://linkedin.com/company/ihrunternehmen"
target="_blank"
rel="noopener noreferrer"
aria-label="Verbinden Sie sich mit uns auf LinkedIn">
<svg><!-- LinkedIn-Symbol --></svg>
LinkedIn
</a>
</div>
<section class="cta-bereich">
<h2>Bereit anzufangen?</h2>
<p>Schließen Sie sich Tausenden zufriedener Kunden an, die unseren Dienstleistungen vertrauen.</p>
<div class="cta-buttons">
<a href="/anmeldung" class="button primary">Kostenlose Testversion starten</a>
<a href="/demo" class="button secondary">Demo ansehen</a>
<a href="/preise" class="button outline">Preise anzeigen</a>
</div>
<p class="small">
Fragen? <a href="/kontakt">Kontaktieren Sie unser Verkaufsteam</a> oder
<a href="tel:+1234567890">rufen Sie (123) 456-7890 an</a>
</p>
</section>
target="_blank" nur wenn nötigrel="noopener noreferrer" mit target="_blank"Links sind das Bindegewebe des Webs, und die Erstellung effektiver Links ist wesentlich für eine gute Benutzererfahrung. Gut gestaltete Links helfen Benutzern, auf Ihrer Website zu navigieren, Informationen schnell zu finden und gewünschte Aktionen durchzuführen.
Denken Sie daran, dass Links sowohl funktionale als auch kommunikative Zwecke erfüllen. Sie sollten klar anzeigen, wohin sie führen, leicht zu identifizieren und zu bedienen sein und eine reibungslose, vorhersagbare Erfahrung für alle Benutzer bieten.
Ob Sie einfache Navigation, komplexe Anker-Systeme oder Call-to-Action-Buttons erstellen, berücksichtigen Sie immer die Bedürfnisse und Erwartungen Ihrer Benutzer. Gute Links sind unsichtbar, wenn sie gut funktionieren - Benutzer können sich auf ihre Ziele konzentrieren, anstatt herauszufinden, wie sie auf Ihrer Website navigieren sollen.
Üben Sie das Erstellen verschiedener Arten von Links, experimentieren Sie mit Styling-Ansätzen und testen Sie Ihre Links immer mit echten Benutzern. Die Zeit, die Sie in die Erstellung durchdachter, zugänglicher Links investieren, wird sich in Benutzerzufr
Lesen Sie weiter mit diesen verwandten Artikeln
Lernen Sie HTML von Grund auf mit diesem umfassenden Leitfaden, der erklärt, was HTML ist, Dokumentstruktur, wesentliche Tags und wie Sie Ihre erste Webseite erstellen.
Meistern Sie HTML-Tags und Attribute mit diesem umfassenden Leitfaden. Lernen Sie über öffnende/schließende Tags, globale Attribute und bewährte Praktiken für sauberen Code.
Meistern Sie die wesentliche Struktur von HTML-Dokumenten. Lernen Sie über DOCTYPE, html-Tag, head-Bereich, body-Bereich und wie Sie alles ordnungsgemäß zusammenfügen.
Meistern Sie HTML-Überschriften (H1-H6) und Absätze für bessere Inhaltsstruktur, Barrierefreiheit und SEO. Lernen Sie semantische Bedeutung und bewährte Praktiken.