Ausführbare HTML-Docs: HTML Link (a href)

Q: Wie erstelle ich einen Link in HTML?

Mit dem Anker-Element: Example . href ist das Ziel, und der Text zwischen den Tags ist das, worauf der Leser klickt.

Q: Wie verlinke ich auf eine bestimmte Stelle einer Seite?

Gib dem Zielelement eine id und verlinke mit einer Raute darauf: FAQ und FAQ . Von einer anderen Seite aus hängst du die Raute an die URL: .

Q: Warum führt mein Link auf die falsche Seite, wenn ich www schreibe?

Ohne https:// behandelt der Browser www.example.com als relativen Pfad auf deiner eigenen Website, der Link führt also zu etwas wie yoursite.com/www.example.com. Schreib bei externen Links immer das Schema: href="https://www.example.com".

Q: Darf ein a-Tag ein div enthalten?

Ja. In HTML5 kann ein Block-Inhalt wie ein , eine Überschrift und einen Absatz umschließen, so baut man Karten, die komplett ein Link sind. Es darf aber keinen weiteren Link, keinen Button und kein anderes interaktives Element enthalten.

So erstellst du einen Link in HTML

Ein Link ist ein Anker-Element, <a>, mit einem href-Attribut. href gibt an, wohin der Link führt; der Inhalt zwischen den Tags ist das, worauf der Leser klickt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Browser zeigen Links blau und unterstrichen an und machen aus dem Mauszeiger eine Hand. Die letzte Zeile zeigt, warum href wichtig ist: Ohne ist <a> normaler Text. Es ist nicht fokussierbar, nicht anklickbar und nicht als Link gestylt.

Absolute und relative URLs

Der Wert von href entscheidet, wohin der Link führt. Die wichtigsten Formen:

`href`	Führt zu
`https://example.com/page`	Eine absolute URL: genau diese Adresse
`/about`	`about` im Wurzelverzeichnis der aktuellen Website
`about.html`	`about.html` im selben Ordner wie die aktuelle Seite
`../index.html`	`index.html` einen Ordner höher
`#pricing`	Das Element mit `id="pricing"` auf dieser Seite
`/help#faq`	Der Abschnitt `faq` einer anderen Seite dieser Website
`mailto:hi@example.com`	Eine neue E-Mail im Mailprogramm des Lesers
`tel:+15551234567`	Ein Anruf, auf Geräten, die telefonieren können

Nimm absolute URLs für andere Websites und Pfade ab dem Wurzelverzeichnis (/about) innerhalb deiner eigenen: Sie funktionieren weiter, wenn die Seite, die sie enthält, in einen anderen Ordner wandert.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Die letzte Zeile ist der häufigste Fehler bei Links. Ohne https:// liest der Browser www.wikipedia.org als Dateinamen im aktuellen Ordner.

E-Mail- und Telefonlinks haben eine eigene Seite: HTML mailto-Link.

Auf einen Abschnitt der Seite verlinken

Jedes Element mit einer id ist ein Ziel. Verlinke mit # und der id darauf, und der Browser scrollt dorthin. Klick die Links in der Vorschau an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Ein paar Details:

Die id muss exakt übereinstimmen, auch in der Groß- und Kleinschreibung. href="#FAQ" findet id="faq" nicht.
href="#top" und href="#" scrollen an den Anfang der Seite, auch wenn kein Element die id top hat.
Der Selektor :target stylt den Abschnitt, auf den die URL gerade zeigt. Auf einer echten Seite wird er hier hervorgehoben; die Vorschau scrollt, ohne ihre Adresse zu ändern, deshalb siehst du die Hervorhebung dort nicht.
Um auf einen Abschnitt einer anderen Seite zu verlinken, häng die Raute an die URL dieser Seite: <a href="/docs/html/table#caption">.

Ein sticky oder fixierter Header verdeckt den Anfang des Abschnitts, zu dem du springst. scroll-margin-top an den Zielen lässt dafür Platz, und scroll-behavior: smooth animiert den Sprung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Lösch die Zeile mit scroll-margin-top und klick noch einmal auf Two: Die Überschrift verschwindet hinter dem dunklen Header.

Download-Links

Das Attribut download bittet den Browser, die Datei zu speichern statt sie zu öffnen. Sein Wert, falls du einen angibst, ist der vorgeschlagene Dateiname:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download funktioniert nur für Dateien vom selben Origin wie die Seite (gleiches Schema, gleicher Host, gleicher Port) sowie für URLs mit data: und blob:. Bei einer Datei von einem anderen Origin, selbst einer Subdomain, ignorieren Browser es und öffnen die Datei wie bei einem normalen Link. Der Server kann den Download jeder Datei mit dem Header Content-Disposition: attachment erzwingen.

Linktext, der Sinn ergibt

Screenreader-Nutzer bewegen sich oft von Link zu Link durch eine Seite und hören dabei nur den Linktext. „Hier klicken“ und „Mehr lesen“ sagen ihnen nichts.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

Das Attribut title zeigt beim Überfahren mit der Maus einen Tooltip, erscheint aber weder auf Touchscreens noch für die meisten Tastaturnutzer. Schreib also nichts Wichtiges hinein.

Eine ganze Karte zum Link machen

Ein <a> kann Block-Inhalt umschließen: Eine Überschrift, ein Bild und ein Absatz können zusammen ein Link sein. So baut man anklickbare Karten.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block macht den ganzen Kasten anklickbar, nicht nur den Text. Halte den Inhalt der Karte kurz, weil ein Screenreader alles davon als Namen des Links vorliest. Und setz niemals einen weiteren Link oder einen Button hinein: Interaktive Elemente dürfen nicht in <a> verschachtelt werden.

Weitere Attribute des a-Tags

Attribut	Was es macht
`href`	Das Ziel. Ohne ist `<a>` kein Link
`target`	Wo er geöffnet wird; `target="_blank"` öffnet einen neuen Tab, siehe Link in neuem Tab öffnen
`rel`	Die Beziehung zum Ziel: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Datei speichern statt öffnen
`hreflang`	Die Sprache der verlinkten Seite, als Hinweis
`referrerpolicy`	Wie viel von der aktuellen URL als Referrer mitgeschickt wird

Häufige Fehler

Kein Schema bei einer externen URL. href="www.site.com" ist ein relativer Pfad. Schreib https://.
<a href="#"> für eine JavaScript-Aktion. Das scrollt nach oben und hängt # an die URL. Wenn ein Klick nirgendwohin führt, nimm einen <button>.
Ein Link in einem Link oder ein Button in einem Link. Beides ist ungültiges HTML: Ein zweites <a> bringt den Parser dazu, das erste vorzeitig zu schließen, und ein Klick auf einen Button in einem Link hat kein eindeutiges Ziel.
Leerzeichen in Dateinamen. href="my file.html" funktioniert meist, weil der Browser das Leerzeichen kodiert, aber my-file.html erspart dir die Frage ganz.
„Hier klicken“ als Linktext. Beschreib stattdessen das Ziel.
Unterschiedliche Groß- und Kleinschreibung der id. #Pricing und id="pricing" sind verschieden.

Häufig gestellte Fragen

Wie erstelle ich einen Link in HTML?

Mit dem Anker-Element: <a href="https://example.com">Example</a>. href ist das Ziel, und der Text zwischen den Tags ist das, worauf der Leser klickt.

Wofür steht href?

Hypertext Reference. Es enthält die URL, auf die der Link zeigt: eine vollständige Adresse, einen Pfad auf derselben Website wie /about, einen Abschnitt der Seite wie #pricing oder ein Schema wie mailto:.

Wie verlinke ich auf eine bestimmte Stelle einer Seite?

Gib dem Zielelement eine id und verlinke mit einer Raute darauf: <h2 id="faq">FAQ</h2> und <a href="#faq">FAQ</a>. Von einer anderen Seite aus hängst du die Raute an die URL: <a href="/help#faq">.

Warum führt mein Link auf die falsche Seite, wenn ich www schreibe?

Ohne https:// behandelt der Browser www.example.com als relativen Pfad auf deiner eigenen Website, der Link führt also zu etwas wie yoursite.com/www.example.com. Schreib bei externen Links immer das Schema: href="https://www.example.com".

Darf ein a-Tag ein div enthalten?

Ja. In HTML5 kann ein <a> Block-Inhalt wie ein <div>, eine Überschrift und einen Absatz umschließen, so baut man Karten, die komplett ein Link sind. Es darf aber keinen weiteren Link, keinen Button und kein anderes interaktives Element enthalten.

Verwandte Konzepte