HTML Link einfügen

HTML Link einfügen mit a href

Per HTML-Code können Sie einen Link einfügen. Mit dem HTML-Tag <a href> beginnen Sie den Link-Text und schließen ihn mit </a>.

So einfach können Sie einen HTML Link einfügen und Inhalte verlinken:

Der HTML-Code ist: <a href="Link-Ziel">Link-Text</a>.
Beispiel für einen Link zu www.bueroassistent.de: <a href="https://www.bueroassistent.de/">bueroassistent.de</a>.
HTML Link mailto: <a href="mailto:kontakt@website.de">kontakt@website.de</a>. So verlinken Sie eine E-Mail-Adresse.
A href Syntax: <a href="URL">. Das Tag <a> wird um den Zusatz "href" erweitert, um einen Link zu erstellen.
HTML Anker Tag:
- Zuerst erstellen Sie den Anker (Anchor): <div id="Anker"></div>
- Dann verlinken Sie zu dem Anker: <a href="#Anker">Link zum Anker</a>
HTML img Link: <a href="bild-link.html"><img src="bild.jpg"></a>. Auf diese Weise verlinken Sie ein Bild mit a href.
HTML Link in neuem Tab öffnen mit target="_blank: <a href="http://www.bueroassistent.de/" target="_blank">bueroassistent.de</a>
HTML Link style: Einen HTML Link können Sie mit mit einer style-Datei beliebig gestalten.
HTML Link color: Den Link können Sie auch farblich gestalten
HTML Link rel: Art der Beziehung zur verlinkten Datei angeben: <link rel="stylesheet" href="style.css">
Ein lokales Verzeichnis verlinken Sie mit dem HTML-Code : <a href="file://C:/">Link zur Festplatte C</a>
Absolute und relative Pfade - mit und ohne Domain
Ein Verzeichnis oder Ordner verlinken Sie mit dem HTML-Code : <a href="/verzeichnis/"></a>

Inhaltsverzeichnis
HTML Link einfügen mit a href
HTML Link erstellen: So verlinken Sie richtig
HTML Link einfügen mit einem Editor
HTML mit einem Validator überprüfen
Fazit
FAQ

HTML Link erstellen: So verlinken Sie richtig

Das Erstellen eines Links ist technisch gesehen sehr simpel. Viel schwieriger ist es jedoch Links in einer Website standardkonform und damit korrekt zu setzen. Nur so funktionieren die Links zu den Einzelseiten, Abschnitten, Ordnern oder externen Websites immer wie gewünscht und sind außerdem sehr benutzerfreundlich.

Im Folgenden werden daher einige grundsätzliche Regeln für standardkonforme, richtige Links gezeigt:

HTML Link mailto: E-Mail-Adresse verlinken
HTML Tag Anker: Verweis zu einem Abschnitt mit einem Anker
HTML img Link: Bild-Link erstellen
HTML-Link zu neuem Tab oder Fenster einfügen
HTML Link style: Mit CSS den Link gestalten
HTML Link color: den Link farblich gestalten
HTML Link rel: Art der Beziehung zur verlinkten Datei angeben
HTML Link auf lokales Verzeichnis
Absolute und relative Pfade - mit oder ohne Domain
Verzeichnis oder Ordner verlinken

HTML Link mailto: E-Mail-Adresse verlinken

Wenn Sie eine E-Mail-Adresse auf Ihrer Webseite verlinken möchten, erweitern Sie den HTML-Link mit mailto:

Beispiel: <a href="mailto:dange@bueroassistent.de">dange@bueroassistent.de</a>

Um einen Mailto-Link zu erstellen, müssen Sie also das Tag <a> mit seinem Attribut href und danach ein "mailto:" verwenden.

Klickt ein Besucher auf diesen E-Mail-Link, öffnet sich direkt das Standard-Programm wie z. B. Outlook, mit dem der Besucher seine E-Mails verwaltet. In dem Standardprogramm wird automatisch die E-Mail-Adresse hinter "mailto" als Empfänger eingetragen.

Alternativ kann ein Besucher an einem Computer mit einem rechten Mausklick die E-Mail-Adresse kopieren und als Empfänger in sein E-Mail-Programm einfügen. Durch langes Drücken auf den Mailto-Link kann auch eine Handy-Benutzer den Link kopieren.

HTML Anker Tag: Verweis zu einem Abschnitt mit einem Anker

Bei langen Texten macht es Sinn, z. B. von einem Inhaltsverzeichnis zum einem Unter-Abschnitt zu verlinken. Dies können Sie sehr leicht mit einer Sprungmarke (Anker) machen:

Wenn Sie z. B. in einem Inhaltsverzeichnis auf die Überschrift eines Abschnitts verlinken wollen, dann legen Sie in der Überschrift zuerst eine ID (Ankername) fest:

<h2 id="kapitel2">Kapitel 2: Mit HTML einen Link erstellen</h2>

Danach erstellen Sie im Inhaltsverzeichnis einen Link, in dem Sie auf die ID (Ankername) verweisen:

<a href="#kapitel2">Mit HTML einen Link erstellen</h2>

Dieser Code verlinkt den Text "Mit HTML einen Link erstellen" im Inhaltsverzeichnis direkt mit dem "Kapitel 2: Mit HTML einen Link erstellen".

HTML img Link: Link mit einem Bild erstellen

Um einen Bild-Link zu einer Unterseite zu setzen, schreiben Sie z. B. diesen HTML-Code:

<a href="https://www.bueroassistent.de"><img src="/bild.jpg" alt="Bild-Link"></a>

Der Code ist somit im Prinzip derselbe wie bei einem Text-Link, nur dass statt dem Text wie z. B. "bueroassistent.de" ein Code zur Anzeige des Bildes verwendet wird:

<img src="/bild.jpg" alt="Link zum Bild">

Klicken Sie bei diesem Link auf das Bild "bild.jpg", wird die Seite aufgerufen, die Sie nach "a href" angegeben haben. In diesem Beispiel ist dies https://www.bueroassistent.de.

HTML Link zu neuem Tab oder Fenster einfügen

Wenn Sie einen Hyperlink zu einer externen Website wie z. B. de.wikipedia.org setzen, sollten Sie Ihrem Besucher klar machen, dass er nun Ihre Website verlässt. Hierfür wird die externe Seite in einem neuem Tab oder neuen Fenster geöffnet. Dies können Sie sehr einfach mit dem Zusatz target="_blank" machen. Dies sieht dann insgesamt bei einem Text-Link z. B. so aus:

<a href="https://de.wikipedia.org" target="_blank">https://de.wikipedia.org</a>

Mit dem Code "target=_blank" wird der Link je nach Einstellung in Ihrem Browser entweder in einem neuem Tab oder neuen Fenster geöffnet. Das Linkziel wird somit festgelegt.

HTML Link style: Mit CSS den Link gestalten

Sie können einen HTML Link mit einem CSS stylesheet fast beliebig gestalten. Jede Website hat eine CSS-Datei in der das Erscheinungsbild der einzelnen Website-Elemente angepasst werden kann.

Beispiel-Code für die Integration einer CSS Style-Datei in ein HTML-Dokument:

<head><link rel="stylesheet" href="style.css"></head>

In der Datei style.css können Sie Ihren Link beliebig gestalten. Sie können beispielsweise die Linkfarbe ändern, ob der Link unterstrichen ist oder welche Hintergrundfarbe er hat. Beispiele:

a {color: red; text-decoration: underline; } // Links haben die Farbe rot und sind unterstrichen

a:visited {color: green; text-decoration: underline;} // besuchte Links sind unterstrichen und erhalten die Farbe grün

a:hover {color: blue; text-decoration: none;} // Links auf die die Maus zeigt, erhalten die Farbe blau und haben keine Unterstreichung

a:active {color: black;  background-color: lightgreen;} // Links die gerade angeklickt werden erhalten die Farbe schwarz und als Hintergrundfarbe hellgrün

Weitere Beispiele für die Gestaltung von HTML Links mit CSS Style.

HTML Link color: den Link farblich gestalten

Standardmäßig hat ein Link in jedem Browser diese Farben:

nicht besuchter Link: blau
besuchter Link: lila
aktiver ("gerade geklickter") Link: rot

Jede Webseite hat ein Stylesheet integriert. Beispiel:

<head><link rel="stylesheet" href="style.css"></head>

In dem Stylesheet style.css können Sie die Farben des Links anpassen. Beispiel:

a {color: green;} //normaler Link: grün
a:visited {color: pink;} //besuchter Link: rosa
a:hover {color: red;} // Link auf den die Maus zeigt: rot
a:active {color: yellow;} //aktiver ("gerade geklickter") Link: gelb

Die Farben der Verknüpfung ändern sich dadurch so:

normaler Link: grün
besuchter Link: rosa
Link auf den die Maus zeigt: rot
aktiver ("gerade geklickter") Link: gelb

HTML Link rel: Art der Beziehung zu einer externen Ressource

Das HTML-Link-Element (<link>) mit rel-Attribut spezifiziert die Art der Beziehung zwischen dem aktuellen Dokument und einer externen Ressource. Der folgende Code gibt zum Beispiel an, dass die verlinkte Datei "styles.css" eine CSS-Stylesheet ist:

 <link rel="stylesheet" href="styles.css">

Weitere mögliche Werte für HTML link rel:

author, Informationen zum Autor: <link rel="author" content="Peter Pan">
canonical, eindeutige URL (Adresse) der Webseite um doppelten Content zu vermeiden:
<link rel="canonical" href="https://www.bueroassistent.de/richtige-seite">
help, Hilfestellung zu dieser Seite: <link rel="help" href="/hilfe/">
icon, importiert ein Icon für Bookmarks: <link rel="icon" type="image/png" href="/favicon.png">
stylesheet, externe CSS-Datei laden: <link rel="stylesheet" href="styles.css">

Der Code mit <link rel=" wird nicht im body-tag, sondern zwischen <head> und </head> eingebaut.

HTML Link auf lokales Verzeichnis

Einen Hyperlink zu einem lokelen Verzeichnis auf Ihrem Computer geben Sie so an:

<a href="file://C:/">Link zur Festplatte C</a>

Sie können diesen Link auf ein lokales Verzeichnis ganz einfach testen, indem Sie:

Den Code oben markieren und kopieren.
In Windows den Dateimanager starten.
Den Code in die Adresszeile kopieren und auf "Enter" drücken.

Als Ergenis werden Ihnen alle Verzeichnisse der Festplatte C angezeigt.

Bitte beachten Sie hierbei, dass dieser Link mit file://C:/ nur so bei einem lokalen Hyperlink zu einem Ordner oder Verzeichnis auf Ihrem Computer funtioniert. Ein Link zu einen Verzeichis einer Website funktioniert ohne file://C:/.

Absolute und relative Pfade - Domain

Wenn Sie Links innerhalb Ihrer Website setzen, müssen Sie nicht immer wieder die volle Link-Adresse mit der Domain angeben.

Absoluter Pfad mit Domain

Beispiel:

<a href="https://www.bueroassistent.de/seite1.html">Beispiel-Link</a>

Relativer Pfad ohne Domain

Sie können die Domain "https://www.bueroassistent.de" einfach weglassen. Stattdessen schreiben Sie nur ein "/". Die Kurzform sieht dann so aus:

<a href="/seite1.html">Beispiel-Link</a>

Achtung: Dies funktioniert nur für interne Links innerhalb Ihrer Website mit derselben Domain! Ebenso kann es bei einigen Websites aufgrund unterschiedlicher Server-Einstellungen Probleme geben, daher sollten Sie dies unbedingt erst ausprobieren, bevor Sie alle internen Links so setzen.

Verzeichnis oder Ordner verlinken

Sobald Sie auf Ihrer Website mehrere Einzelseiten haben, werden Sie irgendwann beginnen Ordner und Verzeichnisse (Ordner) anzulegen. In jeden Ordner sollten Sie unbedingt eine Index-Seite legen: index.html. Damit wird jedem Besucher der Inhalt der index.html angezeigt, wenn er den Ordner aufruft. Einen Link zu dem Ordner setzen Sie nicht zu der Indexseite (z. B. index.html), sondern nur zu dem Ordner selbst. Beispiel:

<a href="/webdesign/">Link zum Verzeichnis Webdesign</a>

Wichtig ist bei dem Link, dass als Abschluss immer oder nie ein "/" steht. Ob Sie das "/" immer setzen oder nicht ist egal, Sie müssen es nur immer gleich machen, damit eine Suchmaschine wie Google die Verzeichnisse nur einmal und nicht doppelt in ihren Suchergebnissen führt. Ansonsten weiß die Suchmaschine nicht genau, welches Verzeichnis nun das Richtige ist: mit oder ohne "/"?

Mit "www" und ohne "www"

Entscheiden Sie sich, ob Sie Ihre Website immer mit "www" aufrufen wollen oder ohne. Beispiel: bueroassistent.de kann mit und ohne "www" aufgerufen werden: 1. Durch Aufruf von "www.bueroassistent.de" und 2. durch Aufruf von "bueroassistent.de". Damit eine Suchmaschine auch diese Seiten nicht als zwei unterschiedliche ansieht, wird jeder Aufruf auf "www.bueroassistent.de" weitergeleitet. Denn: Die meisten Besucher verwenden das "www" vor der Internet-Adresse nicht und ersparen sich das Tippen der drei Buchstaben.

Technisch wird diese Weiterleitung einfach realisiert. Voraussetzung ist, dass ihr Provider/Server die Datei .htaccess zulässt. Wenn ja, machen Sie bitte folgendes:

Legen Sie mit einem Editor die Datei .htaccess (ohne ".txt"!) an. In die Datei schreiben Sie Folgendes:

 RewriteEngine On
 RewriteCond %{HTTP_HOST} ^www.meine-domain.de$ [NC]
 RewriteRule ^(.*)$ https://meine-domain.de/$1 [R=301,L]

Erläuterung: Dadurch leiten Sie alle Anfragen an www.meine-domain.de (mit "www") auf https://meine-domain.de (ohne "www") um. Sie müssen nur noch "meine-domain.de" durch Ihre Internetadresse ersetzen.

Speichern Sie dann die Datei .htaccess (ohne die Endung ".txt"!) und legen Sie sie in das Hauptverzeichnis ("Root-Verzeichnis") Ihrer Website, indem Sie ein FTP-Programm wie z. B. FileZilla verwenden.

Weiterführende Artikel

Weiterführende Artikel zur Link-Erstellung und Syntax um einen HTML Link einzufügen:

HTML/Tutorials/Links
HTML Links
HTML Link Generator
HTML Link erstellen mit dem Online HTML-Editor bei selfhtml.org.

HTML Link einfügen mit einem Editor

Mit dem kostenlosen HTML-Editor Notepad++ können Sie kinderleicht einen HTML Link einfügen:

1. Downloaden Sie den kostenlosen HTML-Editor Notepad++ und installieren Sie ihn. Alternativ öffnen Sie den weniger umfangreichen Windows Editor über Start > Windows-Zubehör > Editor.

2. Kopieren Sie diesen Code (markieren und STRG+C drücken) und fügen Sie ihn in Notepad++ oder dem Windows Editor ein (STRG+V drücken):

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML Link</title> 
</head> 

<body> 

</body> 
</html>

3. Zwischen den Tags <body> und </body> können Sie nun verschiedene Arten eines HTML Links einfügen.

a) So fügen Sie einen internen Link ein:

<a href="https://www.bueroassistent.de">bueroassistent.de</a>

Dieser Code verlinkt innerhalb einer Website, wie z. B. alle Seiten auf bueroassistent.de.

b) So fügen Sie einen externen Link ein:

<a href="https://de.wikipedia.org" target="_blank">https://de.wikipedia.org</a>

Dieser Code verlinkt von einer Website auf eine andere Website, wie z. B. von bueroassistent.de zu de.wikipedia.org in einem neuen Fenster Ihres Browsers, um zu zeigen, dass hier eine neue Website geöffnet wird.

4. So können Sie Ihren HTML Link testen:
Speichern Sie Ihren kompletten HTML Code mit dem Link <a href="https://www.bueroassistent.de">bueroassistent.de</a> als "testseite.html" und öffnen Sie die Datei in einem Browser, wie z. B. Chrome oder Firefox. Wenn Sie jetzt beim Klick auf "bueroassistent.de" zu dieser Website gelangen, funktioniert Ihr HTML Link korrekt. Oder testen Sie mit den Online HTML-Editor bei selfhtml.org

HTML mit einem Link-Validator prüfen

Abschließend sollten Sie immer Ihren Code mit einem Link-HTML-Validator überprüfen. Der Link-Validator überprüft Ihren Code auf Fehler, die von den Vorgaben des World Wide Web Consortiums (W3C) abweichen. Diese Fehler können Darstellungsprobleme oder Sicherheitslücken verursachen. Der Validtor zeigt Ihnen genau in welche Zeile was falsch ist. Beispiel: Der Tag <a> wurde nicht mit </a> geschlossen. Dadurch können die nachfolgenden Inhalte falsch dargestellt werden.

Der beste Link-Validator ist der Link-Checker von https://validator.w3.org. Dieses tolle kostenlose Tool bietet diese Vorteile:

Link Checker des W3C-Consortiums, das die Standards für HTML definiert
externe und interne Links zu anderen Webseiten werden geprüft
Verlinkung von Dateien und Bildern wird getetestet
Anker-Links werden getestet

Nach dem Link-Check erhalten Sie eine Übersicht mit allen Fehlern und Hinweise, wie Sie diese ggf. einfach beheben können:

Auf diese Weise erhalten Sie immer validen Code und Ihre Webseiten funktionieren sicher und so, wie Sie es sich wünschen.

Fazit

Einen HTML Link einzufügen und richtig zu verlinken ist technisch kinderleicht. Aber für eine gesamte Website immer richtige und konforme Links zu erstellen ist schwierig. Die Mühe lohnt sich aber. Denn dadurch wird Ihre Website benutzerfreundlicher und kann auch leichter über eine Suchmaschine gefunden werden. Mit einem Linkchecker können Sie alle Verknüpfungen Ihrer Website überprüfen.

Und wenn Sie das richtige Verlinken gerne üben möchten: Setzen Sie doch einen HTML Link zu bueroassistent.de:

<a href="https://www.bueroassistent.de">bueroassistent.de</a>

Vielen herzlichen Dank!

Weitere Tipps zu HTML:

HTML-Editor Online, WYSIWYG, kostenlos: 22 beste HTML-Editoren im Vergleich
HTML einfach und verständlich erklärt
HTML-Validator: 5 beste Tools zum Prüfen und Korrigieren von HTML und CSS
Phase 5 - exzellenter kostenloser HTML-Editor
Bluegriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau | Download und Tutorial
Linkchecker: kostenlos alle defekte Links finden - 5 beste Tools

FAQ

Was ist ein HTML Link?

Ein HTML Link ist eine "Verlinkung" von einer Webseite auf eine andere Webseite. Sobald ein Benutzer hierauf klickt, wird die neue Webseite aufgerufen.
Damit diese Verlinkung technisch korrekt funktioniert, wird HTML (eine standardisierte Vorgabe von Zeichen) verwendet. Beispiel:

<a href="datei.html">Link-Text</a>

Wie verlinkt man in HTML?

Beispiel-Code für eine Verlinking in HTML:

<a href="datei.html">Link-Text</a>

Wie verlinkt man auf eine Website?

Um auf eine Website zu verlinken müssen Sie einen HTML Link einfügen.

Beispiel-Code:

<a href="datei.html">Link-Text</a>

Wie verweise ich auf ein lokales Verzeichnis?

Um auf ein lokales Verzeichnis zu verweisen, müssen Sie den Verweis so beginnen: file://

Beispiel-Code:

<a href="file://C:">Link zur Festplatte C</a>

Wie füge ich einen Link zu einem neuen Tab ein?

Einen Link zu einem neuen Tab fügen Sie ganz einfach so ein:

Beispiel-Code:

<a href="Link-Ziel" target="_blank">Link-Text</a>

Sobald ein Benutzer auf einen Link mit "target=_blank" klickt, wird die Webseite in einem neuen Tab aufgerufen.

Was ist ein externer Link?

Ein externer Link ist ein Verweis von einer Webseite auf eine außerhalb der eigenen Domain (z. B. bueroassistent.de) liegende Seite. Beispiel: Bei www.bueroassistent.de/seite1 gibt es einen externen Link zu de.wikipedia.org. Wäre der Link zu www.bueroassistent.de/interner-link, wäre er intern, da er auf dieselbe Domain verweist.

Was ist a href?

A href ist Teil eines HTML-Codes, der zur Verlinkung von Webseiten verwendet wird.

Beispiel-Code:

<a href="Linkziel">Link-Text</a>

Durch den Tag <a> leiten Sie einen Link ein. Innerhalb dieses Tag folgt das Attribut href: <a href="">.
Innerhalb der Anführungszeichen können Sie einen Pfad (URL) angeben. Dieser kann auf eine externe Seite verweisen, aber auch auf eine andere Seite innerhalb Ihrer Webseite leiten.
Zwischen <a href=“URL“> und </a> kommt der Text, der anschließend als Hyperlink auf der Webseite sichtbar ist: <a href=“URL“>Anklickbarer Text</a>.

Wie verlinke ich eine E-Mail-Adresse?

Die Verlinkung einer E-Mail-Adresse erfolgt mit dem HTML-Code mailto. Beispiel: a href="mailto:dange@bueroassistent.de" Beim Klick auf eine mit mailto verlinkte E-Mail-Adresse wird das Standard-E-Mail-Programm des Benutzers aufgerufen, wie zum Beispiel Outlook.