HTML ändern · Anleitung

HTML: Link einfügen und ändern

Die eine Zeile

<a href="https://pagefix.io/">Zu PageFix</a>

Die wichtigste Fehlerquelle: das fehlende https://

<!-- falsch — der Browser sucht eine Datei namens "pagefix.io" -->
<a href="pagefix.io">Zu PageFix</a>

<!-- richtig -->
<a href="https://pagefix.io/">Zu PageFix</a>

Ohne https:// behandelt der Browser den Wert als Pfad im eigenen Ordner und sucht dort eine Datei mit diesem Namen. Ergebnis: eine Fehlerseite, obwohl die Adresse richtig aussieht. Eine Adresse mit https:// davor ist eine vollständige Adresse, alles ohne ist ein Pfad auf der eigenen Seite.

Die fünf Link-Arten

Sprungmarke: zu einer Stelle auf derselben Seite

Das ist der Fall für ein Inhaltsverzeichnis oder einen Knopf, der weiter unten zum Preis springt. Das Zielelement braucht ein id-Attribut, der Link verweist mit einer Raute darauf:

<!-- der Link -->
<a href="#preis">Zum Preis</a>

<!-- irgendwo weiter unten: das Ziel -->
<section id="preis"> … </section>

Die id muss auf der ganzen Seite einmalig sein. Kommt derselbe Wert zweimal vor, springt der Browser immer zum ersten.

Damit es nicht ruckelt: Mit html { scroll-behavior: smooth; } gleitet die Seite zum Ziel statt zu springen. Eine Zeile, die den Unterschied zwischen „billig" und „gemacht" ausmacht.

E-Mail-Link mit Betreff

<a href="mailto:support@pagefix.io?subject=Frage%20zum%20Editor">
  Schreib mir
</a>

Ein Klick öffnet das E-Mail-Programm des Besuchers mit Adresse und Betreff. Leerzeichen im Betreff schreibst du als %20. Verlass dich aber nicht darauf, dass das bei jedem funktioniert — wer im Browser ein Webmail nutzt, hat oft kein E-Mail-Programm eingerichtet und bei dem passiert beim Klick nichts. Schreib die Adresse deshalb zusätzlich als Text hin.

Link in neuem Tab öffnen

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

target="_blank" öffnet ein neues Tab. rel="noopener" gehört immer dazu: Ohne diese Angabe kann die verlinkte Seite über JavaScript auf dein Fenster zugreifen. Das ist ein echtes Sicherheitsproblem, und die Zusatzangabe kostet nichts.

Nicht überall neue Tabs: Bei Links innerhalb der eigenen Seite ist ein neues Tab fast immer störend — es nimmt dem Besucher den Zurück-Knopf. Neues Tab ist sinnvoll, wenn jemand gerade ein Formular ausfüllt und du ihn nicht von der Seite wegschicken willst.

Link als Button

Ein Knopf auf einer Verkaufsseite ist technisch fast immer ein Link — er sieht nur aus wie ein Knopf. Das <button>-Element ist für Aktionen innerhalb der Seite gedacht, nicht fürs Weiterleiten.

<a href="/registrieren" class="btn">Jetzt starten</a>

.btn {
  display: inline-block;
  background: #7c5cff;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

display: inline-block ist hier der entscheidende Teil: Ohne diese Angabe wirken Innenabstände oben und unten nicht richtig, und der „Knopf" bleibt eine eingefärbte Textzeile.

Der Linktext: „hier klicken" ist der schwächste

Zwei Gründe: Wer einen Screenreader nutzt, lässt sich oft nur die Links einer Seite vorlesen — eine Liste aus zehnmal „hier klicken" ist dann wertlos. Und Suchmaschinen nutzen den Linktext, um einzuordnen, worum es auf der Zielseite geht.

Ein Link-Ziel nachträglich ändern

Der häufigste Fall im Alltag: Der Bezahl-Link hat sich geändert, oder der Termin-Link zeigt auf einen alten Kalender. Im Code ersetzt du den Wert von href:

<!-- vorher -->
<a href="https://alt.example/checkout" class="btn">Jetzt kaufen</a>

<!-- nachher -->
<a href="https://neu.example/checkout" class="btn">Jetzt kaufen</a>

Die Falle, die richtig Geld kostet: Derselbe Bezahl-Link steht auf einer Verkaufsseite meist mehrfach — im Hero, in der Mitte, beim Preis, im Fußbereich. Wer nur den ersten ändert, hat drei Knöpfe, die weiter auf die alte Adresse zeigen. Suche im Code nach der alten Adresse und prüfe jeden Treffer. Und klick danach jeden Knopf auf der fertigen Seite einmal durch.

Dasselbe ohne Code: anklicken statt tippen

Wenn du deine Seite mit KI gebaut hast und nicht im Code arbeiten willst: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten. Du ziehst deine HTML-Datei ins Tool und arbeitest auf der fertigen Seite.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Zuletzt aktualisiert: 11. September 2026

← Zurück zur Startseite und PageFix ansehen