# 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-attribute/) 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](https://www.ionos.de/digitalguide/online-marketing/suchmaschinenmarketing/seo-basics-interne-verlinkung-und-website-struktur/) 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](https://www.ionos.de/digitalguide/online-marketing/suchmaschinenmarketing/seo-lexikon-suchmaschinenoptimierung-von-a-bis-z/) 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. [YouTube video](https://www.youtube.com/watch?v=iW5ir8IBtx8)## Welchen Aufbau hat a href? Die Syntax von href ist in HTML immer gleich und sieht aus wie folgt: ```html Ankertext ``` 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/) definiert den Anfangs- und Endpunkt des [Hyperlinks](https://www.ionos.de/digitalguide/websites/web-entwicklung/hyperlink/). - 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: ```html Ankertext ``` ## 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: `Absoluter Link zur Beispielseite` - **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: `Relativer Link zur Beispielseite` - **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: `Direkter Link zu einem Element` - **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: `` Tipp Wie Sie [JavaScript in HTML einbinden](https://www.ionos.de/digitalguide/websites/web-entwicklung/javascript-in-html-einbinden/), erläutern wir in einem separaten Artikel. ## 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: ```html Bildbeschreibung ``` ### 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: ```html mustermann@beispielseite.de ``` 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: ```html 0123 1234567 ``` 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: ```html Beispiel ``` ### 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: ```html http://www.example.org ``` Tipp In wenigen Schritten zur perfekten Website! Mit dem [Homepage-Baukasten](https://www.ionos.de/websites/homepage-erstellen "Homepage-Baukasten von IONOS") von IONOS erstellen Sie Ihren professionellen Online-Auftritt mit sinnvollen und übersichtlich aufbereiteten Tools selbst. Alternativ übernehmen unsere Expertinnen und Experten den Aufbau für Sie und gestalten Ihre Website genau nach Ihren individuellen Anforderungen. Wählen Sie die passende Lösung für Ihre Zwecke! This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/href-html/](https://www.ionos.de/digitalguide/websites/web-entwicklung/href-html/) for AI/LLM consumption.