HTML Grundlagen: Links leicht gemacht – Die ultimative Anleitung zur Erstellung und Verwendung von Links

Links erstellen mit dem A Tag

HyperLinks oder kurz Links spielen eine grundlegende Rolle im Internet, denn sie verknüpfen Inhalte miteinander und geben dem World Wide Web seine Struktur. Links sind anklickbare Elemente auf einer Webseite, die zu einer Unterseite auf der eigenen Website führen oder zu einer Seite einer beliebigen externen Website. Grundsätzlich wird eine Navigation durch Hyperlinks realisiert.

Links sind meist farblich hervorgehoben und werden standardmäßig unterstrichen.

Ein Link besteht immer aus mindestens zwei Komponenten: nämlich der URL (Ziel-Adresse) und ein anklickbarer Linktext, z.B. HTML Grundlagen

(<a href="https://www.website-advisor.de/html-grundlagen.php">HTML Grundlagen</a>)

Einen Link erzeugen mit <a href="…">

<a href="URL">Linktext</a>   [1]

Durch Link-Attribute kann genauer festgelegt werden, wie sich ein Link verhalten soll. Dabei ist das Link-Attribut href (für Englisch: Hyper Reference) von zentraler Bedeutung. Folgende Werte für href sind möglich:

• Absolute URL
  Absolute URLs geben die vollständige Adresse einer Webseite oder Resource inklusive Protokoll, Domain-Name und Pfad an. Sie eignen sich perfekt, um einen Link zu einer Seite einer externen Website zu definieren.

• Relative URL
  Relative URLs sind so etwas wie Shortcuts innerhalb einer Website. Sie werden genutzt, um die Adresse einer Ressource relativ zur aktuellen Seite zu definieren. Die Pfad-Segmente / und .. können verwendet werden, um das Root-Verzeichnis oder das übergeordnete Verzeichnis anzusprechen. Das bedeutet, dass a/b/../c/bild.png und a/c/bild.png die gleiche Adresse im Verzeichnisbaum bezeichnen.

• Sprungziele
  Bei Seiten mit viel Text kann es sinnvoll sein, mit einem Link direkt zu einem Sprungziel zu springen. Das Zeichen # wird verwendet, um die Sprungmarke zu kennzeichnen. Die Ziel-URL für einen Sprunglink wird grundsätzlich nach dem Schema URL#Sprungmarke aufgebaut. Die Angabe der URL ist optional, wenn sich das Sprungziel auf derselben Seite befindet.

  Auf der Seite Ankerlinks erstellen wird erläutert, wie Sprungziele definiert und verwendet werden.

Links auf der eigenen Website sind ein wichtiger Faktor für eine gute Benutzererfahrung (UX). Sie helfen Nutzern, sich auf der Website zu orientieren. Außerdem sind sie gut für die Suchmaschinenoptimierung (SEO), denn sie signalisieren Suchmaschinen, dass die verlinkten Webseiten relevant sind. Dabei ist es möglich, einzelne ausgehende Links unterschiedlich zu deklarieren. Durch rel-Attribute lässt sich die Beziehung zwischen der aktuellen Seite und der verlinkten Seite definieren.

Folgende Werte für rel sind möglich:

• rel="alternate"
  Der Hyperlink informiert Suchmaschinen und Benutzer darüber, dass die verlinkte Seite eine alternative Version der aktuellen Seite ist, z.B. in einer anderen Sprache.

• rel="author"
  Der Hyperlink signalisiert, dass auf der verlinkten Seite Informationen über den Autor zu finden sind.

• rel="bookmark"
  Der Hyperlink verweist auf ein Lesezeichen oder dient als Permalink. Permalinks sind meist dafür gedacht auf eine bestimmte Version eines Artikels zu verweisen und dienen als zitierfähige URL.

• rel="external"
  Der Hyperlink informiert Suchmaschinen, dass der Link zu einer Seite außerhalb der aktuellen Website führt.

• rel="help"
  Der Hyperlink führt zu einer Seite, die kontextsensitive Hilfe zur aktuell angezeigten Seite zur Verfügung stellt.

• rel="license"
  Der Hyperlink zeigt an, dass die verlinkte Seite die Lizenzbedingungen für die aktuelle Seite enthält.

• rel="mentions"
  Der Hyperlink signalisiert, dass die verlinkte Seite Informationen über die aktuelle Seite liefert.

• rel="next"
  Der Hyperlink gibt an, dass das aktuelle Dokument Teil einer Serie ist und dass das referenzierte Dokument der nächste Teil dieser Serie ist.

• rel="nofollow"
  Der Hyperlink weist Suchmaschinen an, dem Link nicht zu folgen und die verlinkte Seite nicht zu crawlen.

• rel="noreferrer"
  Verhindert die Übermittlung des Referrer-Headers an die Zielseite. Durch das Blockieren der Übermittlung dieses Headers wird die Privatsphäre der Benutzer geschützt.

• rel="noopener"
  Der Hyperlink signalisiert dem Browser, dass die verlinkte Seite in einem neuen Browser-Tab geöffnet werden soll.

• rel="prev"
  Der Hyperlink gibt an, dass das aktuelle Dokument Teil einer Serie ist und dass das referenzierte Dokument der vorherige Teil dieser Serie ist.

• rel="search"
  Der Hyperlink signalisiert, dass der verlinkte Inhalt eine Suchfunktion darstellt.

• rel="sponsored"
  Kennzeichnet Hyperlinks, die auf bezahlte Inhalte, Werbung oder Affiliate-Marketing verweisen.

• rel="tos"
  Der Hyperlink führt zu den Terms of Service (Nutzungsbedingen) für die aktuelle Seite.

• rel="ugc"
  Kann verwendet werden, um Hyperlinks zu markieren, die zu User-Generated-Content führen.

Wie ist eine URL aufgebaut?

In der Umgangssprache spricht man häufig von Link, obwohl man eigentlich URL meint. Die Abkürzung URL steht für Uniform Resource Locator (Deutsch: einheitlicher Ressource-Anzeiger). Sie bezeichnet die Adresse, die eine Datei auf einem Server angibt. Gebräuchlicher als URL sind die umgangssprachlichen Begriffe Internetadresse oder Web-Adresse.

Eine URL setzt sich aus folgenden Bestandteilen zusammen:

1. Protokoll, z.B. http://, https:// oder ftp://

2. Sub-Domain, z.B. www, www2 oder blog

3. Domain-Name, z.B. website-advisor.de

4. Verzeichnis-Pfad, z.B. / für das Root- bzw. Wurzelverzeichnis

5. Dateiname, z.B. html-grundlagen.php

Sub-Domain und Domain werden durch einen Punkt '.' (Englisch: Dot) voneinander getrennt.

Zusammengefasst ist die URL z.B.
https://www.website-advisor.de/html-grundlagen.php

Es ist empfehlenswert, sprechende URLs zu verwenden, da der Nutzer dadurch sofort auf den Inhalt der Seite schließen kann.

Wenn nun die URL als Wert für das href-Attribut im HTML A-Tag^[1] verwendet wird, erhält man z.B.

<a href="https://www.website-advisor.de/html-grundlagen.php">Linktext</a>   [2]

HTML Tags können verschachtelt werden. Wenn kein Textlink, sondern ein Bild mit Link erstellt werden soll, muss im HTML A-Tag^[2] nur Linktext durch ein IMG Tag ersetzt werden.

HTML-Tag für ein Bild mit Link

<a href="https://www.website-advisor.de/html-grundlagen.php"><img src="/images/bild.png" alt="Bild-Beschreibung"></a>