a href: So bauen Sie Links auf Ihrer Website ein

Der HTML Tag a href wird dazu verwendet, externe und interne Links auf einer Website einzubauen. Die zulässigen Werte des HTML-Attributs href sind dabei genau definiert. Anwendungsbeispiele sind neben der Verlinkung auf andere Websites auch die Weiterleitung auf Mailadressen oder Telefonnummern.

Was ist href und wozu dient es?

Mit a href erstellen Sie externe oder interne Verlinkungen in einem HTML-Dokument. Richtig angewendet fügt sich das href-Attribut nahtlos in Ihre Website ein und erscheint dort in Form eines Hyperlinks. Besucherinnen und Besucher Ihrer Onlinepräsenz gelangen dann mit einem Klick auf eine andere Seite oder wechseln innerhalb Ihrer Website zu einem anderen Ziel. href steht dabei für „hyper reference“ und gibt das gewünscht Linkziel an.

Der Einsatz von href-Attributen auf Ihrer Website bringt zahlreiche Vorteile mit sich. So schaffen Sie durch die hinterlegten Links eine bessere Strukturierung, erleichtern die Navigation oder stellen Zusatzinformationen zur Verfügung. Auch für SEO können Links vorteilhaft sein. Laut Google spielt es dabei keine Rolle, ob Sie eine absolute URL inklusive Domainnamen oder eine relative URL ohne voranstehenden Domainnamen verwenden.

Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern.

Welchen Aufbau hat a href?

Die Syntax von href ist in HTML immer gleich und sieht aus wie folgt:

<a href="URL">Ankertext</a>

Jeder Baustein erfüllt dabei eine wichtige Funktion:

• Durch das a wird der Link eingeleitet. Das a weist dabei einen Ankertext aus. Dieses HTML-Tag definiert den Anfangs- und Endpunkt des Hyperlinks.
• Das href-Attribut wird innerhalb des Ankertextes eingesetzt und legt das Sprungziel des jeweiligen Links fest. Neben einer internen oder externen Website können hier beispielsweise PDF-Dokumente oder Bilder verlinkt werden.
• Innerhalb der Anführungszeichen wird die URL gesetzt, auf die der Link verweisen soll.
• Dahinter folgt der sichtbare Text, der später anklickbar ist.
• Zuletzt wird der Ankertext abgeschlossen.

Häufig werden Links mit dem Attribut title kombiniert, um den Linktitle, eine alternative Beschreibung des Linkziels, zu definieren. Der Linktitle kann zusätzliche Informationen zur verlinkten Website enthalten. Er wird im Frontend sichtbar, wenn man mit der Maus über den Link fährt, ohne darauf zu klicken. Das Definieren von Linktitles wird auch als SEO-Maßnahme empfohlen. In HTML sieht das dann so aus:

<a href="URL" title="Linktitle">Ankertext</a>

Welche Werte darf href haben?

Es ist genau bestimmt, welche Werte das Attribut href in HTML haben darf. Andernfalls erfolgt die Verlinkung nicht ordnungsgemäß. Die erlaubten Werte für href sind folgende:

• Eine absolute URL: Die absolute URL ist das klassische Beispiel für die Verwendung von a href. Sie leitet direkt auf eine externe Website weiter und enthält den Domainnamen, den Pfad sowie (sofern vorhanden) den Dateinamen. Beispiel: <a href="www.beispielseite.de/thema/index.html">Absoluter Link zur Beispielseite</a>
• Eine relative URL: In einer relativen URL gibt man lediglich den Pfad und optional den Dateinamen an. Aus diesem Grund sind relative URLs deutlich kürzer als absolute. Beispiel: <a href="/thema/index.html">Relativer Link zur Beispielseite</a>
• Link zu einem Element: Der direkte Link zu einem Element ist möglich, wenn dieses über eine definierte ID verfügt. Sie haben so die Möglichkeit, ausgewählte Bereiche Ihrer Website intern zu verlinken. Beispiel: <a href="#section3">Direkter Link zu einem Element</a>
• Andere Protokolle: href eignet sich auch für weitere Protokolle, etwa wenn Sie einen direkten Link zu einer vorgegebenen E-Mail-Adresse setzen möchten. Dies funktioniert über mailto:. Andere mögliche Protokolle sind u. a. https://, ftp:// oder file:.
• Skripte: Auch Skripte, z. B. JavaScript, sind erlaubte Werte für a href. Beispiel: <a href="javascript:alert('Haben Sie weitere Fragen?');">

Fünf Anwendungsbeispiele für a href

Es gibt also zahlreiche Anwendungsmöglichkeiten für a href, die Sie auf Ihrer Website implementieren können. Im Folgenden zeigen wir Ihnen einige der gängigsten Anwendungsfälle für href in HTML.

Bild als Link verwenden

Möchten Sie mit href ein Bild als Link auf eine Unterseite setzen, verwenden Sie dafür folgenden Code:

<a href="https://www.beispielseite.de"><img src=" /beispielbild.jpg" alt="Bildbeschreibung"></a>

Auf eine E-Mail-Adresse verlinken

Um eine E-Mail-Adresse zu verlinken, verwenden Sie mailto: als Zusatz direkt vor der Adresse. Das sieht so aus:

<a href="mailto:mustermann@beispielseite.de">mustermann@beispielseite.de</a>

Klickt die Besucherin oder der Besucher nun auf den Link, öffnet sich ihr bzw. sein Standardprogramm für E-Mails und fügt die angegebene Adresse (mustermann@beispielseite.de) automatisch als Empfänger ein. Alternativ hat sie bzw. er die Möglichkeit, die angegebene E-Mail-Adresse mit einem Rechtsklick zu kopieren und selbst in das Programm oder an einer anderen Stelle einzufügen.

Auf eine Telefonnummer verlinken

Auch eine Telefonnummer können Sie mit a href verlinken. Das ist gerade dann sinnvoll, wenn jemand Ihre Seite über das Smartphone aufruft und direkt mit Ihnen in Kontakt treten möchte. Die Verlinkung sieht so aus:

<a href="tel:+491231234567">0123 1234567</a>

Hierbei ist es wichtig, dass Sie hinter dem Telefonverweis tel: ein Pluszeichen und die internationale Vorwahl hinzufügen. Die Null der Ortsvorwahl fällt weg.

Auf ein JavaScript verlinken

Sie können mit href auch auf ein JavaScript verlinken. Der entsprechende Code ist dieser:

<a href="javascript:Beispiel ( ) ">Beispiel</a>

Link in einem neuen Tab oder Fenster öffnen

Auch wenn Links durchaus sinnvoll für Ihre Seite sind, möchten Sie Ihre Besucherinnen und Besuchern dennoch nicht direkt wieder von Ihrer Website auf einen externen Online-Auftritt schicken. Aus diesem Grund kann es sinnvoll sein, den Link in einem neuen Tab oder einem neuen Fenster zu öffnen. So bleiben Nutzerinnen und Nutzer auf Ihrem Angebot und können eventuelle Zusatzinformationen später nachsehen. Der passende Code dafür sieht so aus:

<a href="http://www.example.org" target="_blank">http://www.example.org</a>