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 ein­zu­bau­en. Die zu­läs­si­gen Werte des HTML-Attributs href sind dabei genau definiert. An­wen­dungs­bei­spie­le sind neben der Ver­lin­kung auf andere Websites auch die Wei­ter­lei­tung auf Mail­adres­sen oder Te­le­fon­num­mern.

Was ist href und wozu dient es?

Mit a href erstellen Sie externe oder interne Ver­lin­kun­gen in einem HTML-Dokument. Richtig an­ge­wen­det fügt sich das href-Attribut nahtlos in Ihre Website ein und erscheint dort in Form eines Hy­per­links. Be­su­che­rin­nen und Besucher Ihrer On­line­prä­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-At­tri­bu­ten auf Ihrer Website bringt zahl­rei­che Vorteile mit sich. So schaffen Sie durch die hin­ter­leg­ten Links eine bessere Struk­tu­rie­rung, er­leich­tern die Na­vi­ga­ti­on oder stellen Zu­satz­in­for­ma­tio­nen zur Verfügung. Auch für SEO können Links vor­teil­haft sein. Laut Google spielt es dabei keine Rolle, ob Sie eine absolute URL inklusive Do­main­na­men oder eine relative URL ohne vor­an­ste­hen­den Do­main­na­men verwenden.

Zur Anzeige dieses Videos sind Cookies von Dritt­an­bie­tern er­for­der­lich. Ihre Cookie-Ein­stel­lun­gen 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 ein­ge­lei­tet. Das a weist dabei einen Ankertext aus. Dieses HTML-Tag definiert den Anfangs- und Endpunkt des Hy­per­links.
• Das href-Attribut wird innerhalb des An­ker­tex­tes ein­ge­setzt und legt das Sprung­ziel des je­wei­li­gen Links fest. Neben einer internen oder externen Website können hier bei­spiels­wei­se PDF-Dokumente oder Bilder verlinkt werden.
• Innerhalb der An­füh­rungs­zei­chen wird die URL gesetzt, auf die der Link verweisen soll.
• Dahinter folgt der sichtbare Text, der später an­klick­bar ist.
• Zuletzt wird der Ankertext ab­ge­schlos­sen.

Häufig werden Links mit dem Attribut title kom­bi­niert, um den Linktitle, eine al­ter­na­ti­ve Be­schrei­bung des Linkziels, zu de­fi­nie­ren. Der Linktitle kann zu­sätz­li­che In­for­ma­tio­nen zur ver­link­ten Website enthalten. Er wird im Frontend sichtbar, wenn man mit der Maus über den Link fährt, ohne darauf zu klicken. Das De­fi­nie­ren von Link­tit­les 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. An­dern­falls erfolgt die Ver­lin­kung nicht ord­nungs­ge­mäß. Die erlaubten Werte für href sind folgende:

• Eine absolute URL: Die absolute URL ist das klas­si­sche Beispiel für die Ver­wen­dung von a href. Sie leitet direkt auf eine externe Website weiter und enthält den Do­main­na­men, den Pfad sowie (sofern vorhanden) den Da­tei­na­men. 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 Da­tei­na­men 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 de­fi­nier­te ID verfügt. Sie haben so die Mög­lich­keit, aus­ge­wähl­te Bereiche Ihrer Website intern zu verlinken. Beispiel: <a href="#section3">Direkter Link zu einem Element</a>
• Andere Pro­to­kol­le: href eignet sich auch für weitere Pro­to­kol­le, etwa wenn Sie einen direkten Link zu einer vor­ge­ge­be­nen E-Mail-Adresse setzen möchten. Dies funk­tio­niert über mailto:. Andere mögliche Pro­to­kol­le sind u. a. https://, ftp:// oder file:.
• Skripte: Auch Skripte, z. B. Ja­va­Script, sind erlaubte Werte für a href. Beispiel: <a href="javascript:alert('Haben Sie weitere Fragen?');">

Fünf An­wen­dungs­bei­spie­le für a href

Es gibt also zahl­rei­che An­wen­dungs­mög­lich­kei­ten für a href, die Sie auf Ihrer Website im­ple­men­tie­ren können. Im Folgenden zeigen wir Ihnen einige der gän­gigs­ten An­wen­dungs­fäl­le für href in HTML.

Bild als Link verwenden

Möchten Sie mit href ein Bild als Link auf eine Un­ter­sei­te 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 Be­su­che­rin oder der Besucher nun auf den Link, öffnet sich ihr bzw. sein Stan­dard­pro­gramm für E-Mails und fügt die an­ge­ge­be­ne Adresse (mus­ter­mann@bei­spiel­sei­te.de) au­to­ma­tisch als Empfänger ein. Al­ter­na­tiv hat sie bzw. er die Mög­lich­keit, die an­ge­ge­be­ne E-Mail-Adresse mit einem Rechts­klick zu kopieren und selbst in das Programm oder an einer anderen Stelle ein­zu­fü­gen.

Auf eine Te­le­fon­num­mer verlinken

Auch eine Te­le­fon­num­mer können Sie mit a href verlinken. Das ist gerade dann sinnvoll, wenn jemand Ihre Seite über das Smart­phone aufruft und direkt mit Ihnen in Kontakt treten möchte. Die Ver­lin­kung sieht so aus:

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

Hierbei ist es wichtig, dass Sie hinter dem Te­le­fon­ver­weis tel: ein Plus­zei­chen und die in­ter­na­tio­na­le Vorwahl hin­zu­fü­gen. Die Null der Orts­vor­wahl fällt weg.

Auf ein Ja­va­Script verlinken

Sie können mit href auch auf ein Ja­va­Script verlinken. Der ent­spre­chen­de 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 Be­su­che­rin­nen 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 Nut­ze­rin­nen und Nutzer auf Ihrem Angebot und können even­tu­el­le Zu­satz­in­for­ma­tio­nen später nachsehen. Der passende Code dafür sieht so aus:

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