Links sind das Herz des Webs. Mit dem HTML-Tag <a> verbindest du Seiten, springst zu Abschnitten, öffnest Dateien, startest E-Mails und vieles mehr. Auf html-link.de findest du eine komplette Einführung – von den Grundlagen bis zu Profi-Tipps.
Ein Link (oder Hyperlink) ist ein klickbares Element auf einer Webseite. Meist ist er als Text oder Bild sichtbar. In HTML werden Links mit dem Tag <a> erstellt.
<a href="https://www.html-link.de">
Besuche html-link.de
</a>Der Browser zeigt den Text „Besuche html-link.de“ als klickbaren Link. Beim Klick wird die angegebene Adresse im Attribut href aufgerufen.
| Begriff | Erklärung |
|---|---|
| Tag | HTML-Element, z. B. <a>. |
| Attribut | Zusätzliche Info im Tag, z. B. href="...". |
| Link-Text | Der sichtbare, anklickbare Text zwischen <a> und </a>. |
| URL | Adresse des Ziels, z. B. https://example.com. |
Das Grundmuster eines HTML-Links ist immer gleich aufgebaut:
<a
href="Ziel-URL"
title="Zusätzliche Erklärung (Tooltip)"target="_self"a>| Attribut | Typische Werte | Funktion |
|---|---|---|
| href | URL, Anker, mailto:, tel:, Datei-Pfad | Ziel des Links, Pflichtfeld beim <a>-Tag. |
| title | Beliebiger Text | Kurze Erklärung, erscheint als Tooltip beim Überfahren mit der Maus. |
| target | _self, _blank, _parent, _top | Legt fest, wo das Linkziel geöffnet wird (z. B. neuer Tab). |
| rel | nofollow, noopener, noreferrer, sponsored, … | Beschreibt Beziehung zum Ziel, wichtig für Sicherheit & SEO. |
| download | optional Dateiname | Signalisiert, dass eine Datei heruntergeladen werden soll. |
<a
href="https://de.wikipedia.org"
target="_blank"
rel="noopener noreferrer"
title="Wikipedia in neuem Tab öffnen"a>Hinweis: rel="noopener noreferrer" wird zusammen mit target="_blank" empfohlen, um Sicherheits- und Datenschutzprobleme zu vermeiden.
Interne Links verweisen auf Seiten innerhalb derselben Website. Sie sind wichtig für die Navigation und für Suchmaschinen.
<a href="/kontakt/">Kontakt</a>Der Link führt zur Seite /kontakt/ derselben Domain, unabhängig davon, ob deine Seite z. B. https://www.html-link.de oder https://html-link.de lautet.
| Art | Beispiel | Wann nutzen? |
|---|---|---|
| Absolute URL | https://www.deine-seite.de/seite.html | Für externe Links oder wenn die komplette Adresse wichtig ist. |
| Root-relativ | /seite.html | Innerhalb deiner eigenen Website; robust bei Domainwechsel. |
| Relativ | unterordner/seite.html | Innerhalb eines Ordnersystems; hängt vom aktuellen Pfad ab. |
Mit Ankern kannst du innerhalb einer Seite zu Überschriften oder Abschnitten springen. Praktisch für Inhaltsverzeichnisse und FAQ-Bereiche.
Gib dem Ziel-Element ein id-Attribut:
<h2 id="kontakt">Kontakt</h2>Verlinke mit einer Raute # plus ID:
<a href="#kontakt">
Zum Kontakt-Abschnitt springen
</a>IDs müssen auf der Seite eindeutig sein. Nutze kurze, sprechende Namen wie id="faq-zahlung" oder id="preise".
<a href="mailto:info@html-link.de">
E-Mail an uns
</a>Beim Klick öffnet sich das Standard-E-Mail-Programm mit eingetragener Empfänger-Adresse.
<a
href="mailto:info@html-link.de?subject=Frage%20zu%20HTML-Links&body=Hallo,%0D%0Aich%20habe%20eine%20Frage%20zu..."a>Leerzeichen und Sonderzeichen müssen URL-kodiert werden (z. B. Leerzeichen = %20).
<a href="tel:+492012345678">
Jetzt anrufen
</a>Auf Smartphones öffnet dieser Link direkt die Telefon-App mit der Nummer.
<a
href="/downloads/preisliste.pdf"
downloada>Das download-Attribut signalisiert dem Browser, dass die Datei gespeichert werden soll (unterstützung je nach Browser).
<a href="/bilder/galerie/">
Zur Bildergalerie
</a>Der Webserver entscheidet, ob der Ordner z. B. eine Index-Datei (index.html) anzeigt.
<a href="/startseite/">
<img src="/bilder/logo.png"
alt="Zur Startseite"a>Der Besucher klickt auf das Bild, um zur Startseite zu gelangen. Wichtig ist ein gutes alt-Attribut für Screenreader.
Ein Button, der in Wirklichkeit ein Link ist, wird meist mit CSS gestaltet:
<a href="/jetzt-buchen/"
class="btn-primary">Jetzt buchen</a>/* Beispiel-CSS */
.btn-primary {
display: inline-block;
padding: 10px 18px;
border-radius: 999px;
text-decoration: none;
background: #0c4d8d;
color: #fff;
font-weight: 600;
}
.btn-primary:hover {
background: #0960b8;
}Technisch bleibt es ein Link, wirkt aber wie ein Schaltknopf. Für Formulare solltest du trotzdem echte <button>-Elemente verwenden.
Standardmäßig sind Links blau und unterstrichen. Mit CSS kannst du das Aussehen an dein Design anpassen.
a {
text-decoration: underline; /* Standard: unterstrichen */
}
a:visited {
color: purple; /* besucht */
}
a:hover {
text-decoration: none; /* beim Überfahren mit der Maus */
}
a:active {
color: red; /* während des Klicks */
}
a:focus {
outline: 2px solid #0c4d8d; /* Tastaturfokus sichtbar machen */
}Gute Links sind nicht nur technisch korrekt, sondern auch verständlich und für alle nutzbar.
Links, die neue Tabs öffnen, können verwirrend sein. Nutze target="_blank" sparsam und kennzeichne solche Links am besten mit einem Hinweis wie „(öffnet in neuem Tab)“.
Nutzer müssen Links mit der Tab-Taste erreichen können. Entferne deshalb nie den Fokus-Rahmen, sondern gestalte ihn höchstens hübscher.
| Wert | Typischer Einsatz |
|---|---|
| nofollow | Bei Links, deren Empfehlung du nicht aussprechen willst (z. B. Kommentare). |
| sponsored | Werbelinks / bezahlte Kooperationen. |
| ugc | User-Generated-Content (z. B. Foren). |
Für ganz normale, redaktionelle Links innerhalb deiner Website brauchst du meist kein besonderes rel-Attribut.