Tutorials

Richtig verlinken: Die ultimative Anleitung für HTML, Markdown und Textprogramme

Melden

Hyperlinks (oder einfach „Links“) sind das Rückgrat des Internets. Sie verbinden Webseiten miteinander, leiten Leser zu relevanten Quellen und sind unverzichtbar für die Navigation.

In diesem Tutorial lernst du Schritt für Schritt, wie du Links in den verschiedenen Umgebungen erstellst: im Webcode (HTML), in modernen Schreibprogrammen (Markdown) sowie in klassischen Text-Editoren (Word, Google Docs, WordPress).

1. Die Grundlagen: Was gehört zu einem Link?

Jeder funktionierende Textlink besteht aus zwei Hauptelementen:

  1. Das Link-Ziel (URL): Die Adresse, zu der der Nutzer geleitet wird (z. B. https://www.beispiel.de).
  2. Der Ankertext (Link-Text): Das klickbare Wort oder der Satz, den der Nutzer sieht (z. B. „Besuche unsere Startseite“).

2. Links erstellen mit HTML (für Webseiten & Blogs)

HTML ist die Sprache des Webs. Hier wird das sogenannte Anchor-Tag (<a>) verwendet.

Die Grundstruktur:

<a href="DEINE-ZIEL-URL">Dein klickbarer Text</a>

Beispiele:

  • Einfacher externer Link:

    <a href="https://www.wikipedia.org">Wikipedia aufrufen</a>

  • Link in einem neuen Tab öffnen: (Wichtig: Nutze aus Sicherheitsgründen immer rel="noopener noreferrer", wenn du target="_blank" verwendest.)

    <a href="https://www.google.de" target="_blank" rel="noopener noreferrer">Google in neuem Fenster öffnen</a>

  • E-Mail-Link (öffnet das Mail-Programm):

    <a href="mailto:kontakt@beispiel.de">Schreib uns eine E-Mail</a>

  • Telefon-Link (auf Smartphones direkt wählbar):

    <a href="tel:+49123456789">Jetzt anrufen</a>

3. Links erstellen mit Markdown (Notion, Reddit, GitHub, Discord)

Markdown ist eine vereinfachte Auszeichnungssprache, die bei vielen modernen Tools zum Einsatz kommt.

Die Formel:

Eckige Klammern für den Text, runde Klammern für die URL – ohne Leerzeichen dazwischen.

[Klickbarer Text](DEINE-ZIEL-URL)

Beispiel:

Hier findest du [weitere Informationen](https://www.beispiel.de).

Ergebnis im Text: Hier findest du weitere Informationen.

4. Links in Editoren (Word, Google Docs, WordPress & Co.)

Wenn du mit visuellen Editoren arbeitest, musst du keinen Code schreiben.

Der universelle Tastaturbefehl:

Für fast alle Textverarbeitungsprogramme gibt es einen weltweiten Standard-Shortcut:

  • Windows: Strg + K
  • Mac: Cmd (Befehlstaste) + K

Schritt-für-Schritt:

  1. Markiere das Wort oder den Satz, der verlinkt werden soll.
  2. Drücke Strg + K (oder Cmd + K). Alternativ klickst du auf das Kettenglied-Symbol in der Menüleiste.
  3. Ein kleines Fenster öffnet sich. Füge dort die kopierte Webadresse (URL) ein.
  4. Bestätige mit der Enter-Taste.

5. Profi-Tipp: Sprungmarken (Anchor Links)

Möchtest du innerhalb einer langen Seite zu einem bestimmten Abschnitt springen?

  1. Ziel definieren: Gib der Ziel-Überschrift eine eindeutige ID (in HTML):
    <h2 id="kapitel1">Kapitel 1</h2>
  2. Link setzen: Verlinke auf diese ID mit einer Raute (#):
    <a href="#kapitel1">Direkt zu Kapitel 1 springen</a>

6. Best Practices: Wie verlinkt man richtig?

Ein technisch funktionierender Link ist gut – ein nutzerfreundlicher Link ist besser:

  • Vermeide „Hier klicken“: Links wie „Klicke hier für die Preisliste“ sind schlecht für Barrierefreiheit und SEO. Besser: „Hier findest du unsere vollständige [Preisliste]“. Der Text sollte verraten, wohin die Reise geht.
  • Protokoll nicht vergessen: Achte darauf, immer das https:// mitzukopieren, da der Link sonst oft als fehlerhaft eingestuft wird.
  • Sparsam umgehen: Zu viele Links in einem Textabschnitt lenken den Leser ab. Setze Links nur dort, wo sie echten Mehrwert bieten.
0