HTML Link

Wie du einen HTML-Link erstellst

HTML-Links sind Hyperlinks, die es Internetnutzern ermöglichen, von einer Webseite zu einer anderen zu springen. Um einen HTML-Link auf deiner Website zu erstellen, nutzt du den <a>-Tag und das Attribut „href“. Zum Beispiel:

In diesem Beispiel ist „https://www.studyflix.de“ die URL, zu der der Nutzer weitergeleitet wird, wenn er auf die Schaltfläche „Besuche Studyflix!“ klickt.

Den Text innerhalb des <a>-Tags kannst du beliebig anpassen und auch die URL kann jede gültige Internetadresse sein.

HTML-Link erstellen — a href

Mit dem HTML-Element „a href“ hast du die Möglichkeit, interne und externe Verlinkungen auf deiner Webseite zu erstellen. 

Das Grundgerüst eines „a href“-Links in HTML sieht so aus: 

• Der <a>-Tag, auch Anker-Tag genannt, wird verwendet, um Hyperlinks zu erstellen. Hier gibt es einen Start- (<a>) und einen End-Tag (</a>).
• Das Attribut „href“ steht für „Hypertext Reference“Er gibt die URL an, auf die der Link verweist. Wichtig ist, dass die URL in Anführungszeichen („“) steht.
• Der Linktext ist der sichtbare Text, den der Nutzer auf der Webseite sieht und auf den er klicken kann. Er ist üblicherweise unterstrichen und blau dargestellt. So erkennt der Nutzer, dass es sich hier um einen Link handelt.

Attribut „title“

Mit dem „title“-Attribut können zusätzliche Informationen über den Link ergänzt werden. Fährt der Nutzer mit der Maus dann über den Link, wird ihm ein Text angezeigt. Dieser Text wird auch als „Tooltip“ bezeichnet.

Das Attribut und der Tooltip werden direkt in den Start-Tag <a> eingefügt. Der Text im „title“-Attribut kann frei angepasst werden. Er sollte kurz und prägnant sein, um dem Benutzer zusätzlichen Kontext zu geben.

In dem Beispiel ist „Hier geht’s zu Studyflix!“ der Text (Tooltip), der dem User angezeigt wird, wenn er den Mauszeiger über den Link bewegt. 

Übrigens: Das „title“-Attribut ist auch eine beliebte SEO-Maßnahme. Denn es kann die Relevanz des Links für Suchmaschinen verstärken, indem es zusätzliche Keywords enthält.

Neuen Tab oder neues Fenster öffnen

Normalerweise wird der HTML-Link im selben Tab bzw. Fenster geöffnet, in dem der Link angeklickt wurde. Mit dem „target“-Attribut in einem HTML-Link kannst du bestimmen, wo der verlinkte Inhalt geöffnet wird. Das Attribut kann dabei verschiedene Werte annehmen. Je nachdem, wo der Link geöffnet werden soll.

Der häufigste Wert ist „_blank“. Er sorgt dafür, dass der Link in einem neuen Browser-Tab oder -Fenster geöffnet wird. Damit kannst du den Nutzer auf deiner Seite halten, während er gleichzeitig andere Inhalte erkundet.

HTML-Link innerhalb der Webseite

Mit dem Ankertag <a> kannst du nicht nur auf externe Webseiten, sondern auch auf eine Stelle innerhalb derselben Seite verlinken. Dafür gibt es zwei Möglichkeiten — absolute und relative Pfade.

• Absolute Pfade:
  Ein absoluter Pfad gibt die vollständige Internetadresse an. Sie beinhaltet den Namen der Webseite (Domain), den genauen Ort der Seite auf dem Webserver (Pfad) und manchmal auch den Namen der spezifischen Datei auf dieser Seite.

• Relative Pfade:
  Bei einem relativen Pfad kann die Domain weggelassen und nur der Pfad angegeben werden. Dadurch sind relative URLs auch deutlich kürzer.

Wichtig: Absolute Pfade funktionieren sowohl für interne als auch externe Links. Ein relativer Pfad ist jedoch nur für Links innerhalb der eigenen Webseite möglich.

HTML-Link — Verweis zu einem Abschnitt

Eine weitere Möglichkeit für eine interne Verlinkung ist es, auf einen Abschnitt zu verweisen. Das ist für lange Seiten nützlich, die beispielsweise ein Inhaltsverzeichnis zu Beginn haben. So kann der Nutzer schnell zu einer anderen Stelle springen, was die Seite benutzerfreundlicher macht.

In diesem Beispiel führt der Klick auf „Kapitel 3: HTML-Link erstellen“ dazu, dass der Nutzer zu Kapitel 3 der Seite springt.

Voraussetzung für einen funktionierenden Link ist, dass in der Überschrift vom Kapitel selbst (in dem Fall Kapitel 3) eine ID festgelegt wird. Dafür verwendest du das Attribut „id“ im Start-Tag der Überschrift. Das sieht zum Beispiel so aus: 

HTML-Link — E-Mail-Adresse verlinken

Neben einer URL kannst du auch auf eine E-Mail-Adresse verweisen. Dafür wird der Zusatz „mailto:“ verwendet. Der kommt vor die E-Mail-Adresse, die du anstelle der URL in den <a>-Tag setzt:

Klickt ein Nutzer auf den Link, öffnet sich sein Standard-E-Mail-Programm. Die E-Mail-Adresse, die du nach „mailto:“ angibst, wird dann automatisch als Empfänger eingetragen. So können Nutzer leichter Kontakt aufnehmen, ohne die E-Mail-Adresse manuell eingeben zu müssen.

HTML-Link — Telefonnummer verlinken

Um eine Telefonnummer in HTML zu verlinken, kannst du „tel:“ verwenden. Der Zusatz wird auch hier wieder vor die verlinkte Telefonnummer gesetzt. Wichtig ist aber, dass vor dem Telefonverweis ein Pluszeichen und die entsprechende Ländervorwahl gesetzt wird.

Diese Funktion ist vor allem für Nutzer relevant, die mit ihrem Smartphone die Webseite besuchen. Sobald sie auf den Link klicken, öffnet sich die Telefon-App am Handy und der Anruf wird direkt gestartet. Damit erspart sich der Nutzer die Tipparbeit und es entstehen auch keine Tippfehler. 

Übrigens: Auch auf Desktop-Computern kann der Link eine Telefon-App öffnen. Bei Mac wäre das z. B. FaceTime.

HTML-Link — Bild verlinken

Statt des Linktextes kannst du auch ein Bild verwenden. Klickt der Nutzer auf das Bild, wird er ebenfalls zum angegebenen Ziel weitergeleitet. Um ein Bild in HTML zu verlinken, verwendest du das HTML-Element <img>.  

Im Start-Tag wird wie bei einer normalen Verlinkung die URL angegeben. Anstelle des Linktextes folgt jetzt der „img“-Tag für das Bild. Unter „bild.jpg“ schreibst du den Dateinamen des Bildes, das du als Link verwenden willst. 

In das Attribut „alt“ im „img“-Tag wird eine kurze und prägnante Bildbeschreibung eingefügt. Das ist für die Fälle, in denen zum Beispiel das Bild nicht geladen werden kann. 

Ein Bild wird oft als visueller „Button“ für Werbezwecke verwendet. Beispielsweise könnte ein Bild mit dem Instagram-Logo den Nutzer auf die eigene Instagram-Seite leiten.

Übrigens: Das Attribut „scr“ steht für „source“ und gibt den Speicherort vom Bild an.

JavaScript verlinken

Mit JavaScript kann eine Webseite noch interaktiver gestaltet werden, ohne dass der Nutzer die Seite verlassen muss. 

Um JavaScript mit einem HTML-Link zu verbinden, verwendest du ebenfalls das <a>-Tag. Anstelle der URL setzt du aber eine JavaScript-Funktion in das „href“-Attribut. Beispielsweise kann mit dem JavaScript-Befehl „alert( )“ eine Pop-up-Nachricht angezeigt werden: 

Hier wird dem Nutzer einer Webseite ein spezielles Angebot durch ein Pop-up-Fenster angezeigt, sobald er auf „Klicke hier für ein exklusives Angebot!“ klickt. 

HTML-Link — häufigste Fragen

• Wie kann man mit HTML einen Link einfügen?
  Um in HTML einen Link einzufügen, nutzt du den HTML-Tag <a href>. Die grundlegende Struktur sieht so aus: <a href=“URL“>Linktext</a>.
   
• Womit kann man einen Link einfügen bei HTML?
  Mithilfe des <a>-Tags kannst du einen Link in HTML einfügen. In den Start-Tag schreibst du das Attribut „hrefs“ und den Link der Webseite, auf die du verweisen willst. Den Linktext, den der Nutzer auf deiner Webseite sieht, schreibst du zwischen Start- und End-Tag.

HTTP Error 500

Ist der Link zu einer Webseite nicht erreichbar, erscheint der Fehler „HTTP Error 500“. Was das bedeutet und wie du als Ersteller der Webseite den Fehler beheben kannst, erfährst du hier!