HTML-Links einfügen + Scroll-, .pdf-, Email-, Telefon-Links

Worum geht´s?

HTML Links sind die Basis des World Wide Web. Nicht nur verlinken sie deine Unterseiten miteinander und mit anderen Webseiten, sie können auch als Sprung-Links zum Scrollen auf der gleichen Unterseite, als Download-Links, als Anruf- und Email-Links verwendet werden. Hier erfährst du, wie all diese verschiedenen HTML-Links funktionieren.

1. Wie du HTML-Links in deinen  HTML-Code einfügst

Ein einfacher Link ist relativ einfach zu erstellen. Was du dazu brauchst, ist ein <a>-Tag, wobei das „a“ darin für „anchor“, zu Deutsch „Anker“ steht. Der HTML-Link „verankert“ sich gewissermaßen an seinem Ziel, damit der Webseiten-Besucher sich entlang dieser Anker von Unterseite zu Unterseite bewegen kann.

Das <a>-Tag ist ein soziales HTML-Tag, das heißt es hat ein öffnendes und ein schließendes Tag. Das öffnende Tag braucht ähnlich wie beim img-Tag ein Attribut, das dem Browser sagt, wohin die Reise nach dem Klick gehen soll. Dieses heißt in diesem Fall href. Und ein einfacher Link sieht dann z.B. so aus:

<a href="http://relativemeister.com">Klicke hier, um zu den relativen Meistern zu gelangen</a>

Der obige HTML-Code erzeugt einen blauen, unterstrichenen und klickbaren Link, der uns mit einem Klick auf die im href-Attribut angegebene Webseite bringt.

Das Ergebnis sieht in etwa so aus:

2. Wie du aus einem Bild einen HTML-Link machst

Dir wird vielleicht aufgefallen sein, dass das <a>-Tag aus einem öffnenden und einem schließenden Tag besteht.

Das geniale daran ist, dass damit alles, was zwischen dem öffnenden und dem schließenden <a>-Tag anklickbar wird und zum im href-Attribut angegebenen Ziel führt.

Du willst ein anklickbares Bild?

Dann füge ein <img>-Tag in den Link ein! In etwa so:

<a href="http://relativemeister.com">
    <img src="http://relativemeister.com/wp-content/uploads/wichtelFrauLaptop.png">
</a>

Das Ergebnis habe ich dir hier gleich zum Ausprobieren reingepackt. Wenn du auf das Bild klickst, kommst du zur im href-Attribut angegebenen Seite:

3. HTML-Links mit dem Attribut target im neuen Tab oder Fenster öffnen

Du kannst deinen HTML-Links weitere Attribute hinzufügen. Eines der beliebtesten ist das Attribt target. Damit kannst du bestimmen, ob der Link im gleichen Tab, in einem anderen Tab oder sogar in einem neuen Fenster geöffnet werden soll.

Funktionieren tut das Ganze so:

<a href="https://www.google.com" target="_blank">Hier zu Google im neuen Tab oder Fenster</a>

Ob der Link in einem neuen Tab oder Fenster geöffnet wird, hängt ein Stück weit vom Browser und den konkreten Einstellungen des Benutzers ab.

Eine Warnung: Viele Benutzer mögen es nicht, wenn Dinge passieren, mit denen sie nicht gerechnet haben. Im Zweifelsfall ist es oft besser, solche Dinge nicht voreinzustellen. So kann der Benutzer selbst entscheiden, welche Links er in einem neuen Tab öffnen möchte und welche nicht.

4. Spezielle HTML-Links: Scroll-Links, .pdf-Links, Download-Links, Email-Links und Telefonnummer-Links

Neben den klassischen Links gibt es in HTML noch eine Vielzahl an speziellen Links für bestimmte Zwecke. Hier eine kleine Liste der nützlichsten:

4.1 Scroll-Links in HTML

Wahrscheinlich hast du schon mal eine Webseite gesehen, bei der man über einen „nach oben“-Button wieder automatisch nach ganz oben scrollen konnte. Dies wäre ein klassischer Einsatzbereich für Scroll-Links (auch Sprung-Links genannt).

Diese funktionieren sehr ähnlich wie ein normaler Link, nur dass das Ziel des Links im href-Attribut eine Raute haben muss, die dem id-Attribut eines HTML-Elements auf der Seite entsprechen muss.

Weil das komplizierter klingt als es ist, hier ein kleiner Code-Block zum ausprobieren:

<a href="#ganzUnten">Klicke hier, um zu den relativen Meistern zu gelangen</a>
<div style="background-color: orange; height: 2000px;"></div>
<h1 id="ganzUnten">Überschrift ganz unten</h1>

Die h1-Überschrift hat dabei eine ID bekommen, nämlich „ganzUnten“. Der Sprunglink hat im href-Attribut die ID der Überschrift samt einer # davor.

Wenn du jetzt den Link oben anklickst, scrollt der Browser automatisch zur Überschrift mit der mit Hilfe der # verknüpften ID.

Das <div>-Tag und was es mit dem style-Attribut auf sich hat kommt in einem anderen Tutorial vor. Nur als Vorschau: es hat viel mit CSS zu tun. In diesem Fall wird dadurch der orange Block erzeugt, der unsere Überschrift vom Link trennt. Einfach damit wir sehen können, dass das scrollen funktioniert.

4.2 .pdf-Links in HTML

Wenn du eine .pdf-Datei im Browser anzeigen lassen willst, kannst du diese einfach im href-Attribut verlinken. Beim Klick darauf öffnet sich die .pdf dann im Browser.

Wenn du willst, dass sich die .pdf-Datei in einem neuen Tab öffnet, macht das target-Attribut von weiter oben Sinn.

Im Code:

<a href="test.pdf" target="_blank">Öffne das .pdf</a>

4.3 Download-Links in HTML

HTML-Download-Links funktionieren im Grunde sehr ähnlich wie .pdf-Links, nur dass sie – theoretisch – direkt zum Download führen.

Faktisch ist es jedoch so, dass z.B. .pdf-Dateien in vielen Browsern stattdessen geöffnet werden. Über STRG + S kann man sie dann speichern.

Funktionieren tut das Ganze dann so:

<a href="test.pdf" download="mytest.pdf">Speichere das .pdf unter neuem Dateinamen</a>
<a href="test.pdf" download>Speichere das .pdf wie es ist</a>

Beide Links funktionieren grundsätzlich. Bei der zweiten Version wird einfach der tatsächliche Dateiname als zu speichernder Name vorgeschlagen. Bei der ersten Version wird der vorgeschlagene Dateiname durch das download-Attribut bestimmt – mytest.pdf in diesem Fall.

4.4 Email-Links in HTML mit :mailto

HTML-Links können auch genutzt werden, um dem Benutzer zu ermöglichen, direkt mit einem Klick eine Email zu schreiben. Dabei wird das vom Webseiten-Besucher voreingestellte Email-Programm automatisch geöffnet und die Empfänger-Adresse gleich automatisch voreingetragen:

<a href="mailto:niklas@relativemeister.com">Schreib mir eine Mail</a>

Man kann aber auch noch einen Schritt weiter gehen und vordefinieren, was im Betreff oder im Mail selbst vorgefertigt stehen soll.

Dazu muss man diese Textbausteine an die Mail-Adresse entsprechend anhängen, z.B. so:

<a href="mailto:niklas@relativemeister.com?subject=Mein Betreff&body=Das ist der voreingestellte Mail-Text">Schreib mir eine Mail</a>

Hier das Ergebnis, wenn ich auf diese HTML-Link klicke (ich nutze Thunderbird für meine Emails). Betreff und Text ist tatsächlich schon voreingetragen:

4.5 Telefon-Links in HTML mit :tel

Da mittlerweile (Stand 2022) weit über 50% aller Webseiten-Besuche über Handy/Tablet laufen, können wir davon ausgehen, dass ebenso über 50% beim Besuch unserer Webseite ein Gerät dazu benutzen, dass auch telefonieren kann.

Wäre es nicht grandios, wenn unsere Besucher mit nur einem Link direkt die richtige Telefonnummer schon voreingespeichert hätten und dann nur noch anrufen müssten?

Genau das macht der Zusatz :tel – er macht das Anrufen für Webseiten-Besucher erheblich einfacher.

Funktionieren tut das Ganze so:

<a href="tel:+436608769955">Niklas anrufen</a>

Wichtig dabei ist, dass du die jeweilige Landes-Vorwahl mit einem + hinzufügst, und die führende 0 bei der Telefonnummer auslässt. Aus meiner eigentlichen Nummer 0660/8769955 wird dann z.B. +436608769955.

5. Achtung Spam bei öffentlich auffindbaren Telefonnummern und Mail-Adressen!

Wenn du deine Telefonnummer oder Mail-Adresse offen ins Internet stellst (was bei unseren speziellen Links noch mehr der Fall ist wie im Fließtext, weil Bots sie noch besser finden können), kann es sein, dass du in Zukunft vermehrt Spam-Mails oder dubiose Anrufe bekommst.

Es gibt Bots (automatisierte Programme), die nur die Aufgabe haben, solche Nummern/Mail-Adressen von Webseiten abzugreifen und in entsprechende Listen einzutragen. Alle auf diesen Listen werden dann potentiell vermehrt Spam-Mails oder auch verdächtige Anrufe von Betrügern bekommen.

Wenn du nur lokal auf deinem Rechner HTML-Seiten erstellst, kannst du diese Warnung fürs erste getrost ignorieren.

Aber sobald du deine Webseiten online stellst, solltest du dir überlegen, was du im schlimmsten Fall machen würdest.

Ich habe beispielsweise mehrere Mail-Adressen, die ich im Bedarfsfall einfach  löschen und neu anlegen kann.

Meine hier angegebene Telefonnummer ist bewusst eine zusätzliche nur für Geschäftliches, während meine private nirgends öffentlich aufscheint und nur für Freunde, Bekannte und Familienmitglieder gedacht ist. Kostet mich zwar ca. 20€/Monat extra, aber die zusätzliche Sicherheits-Barriere ist es mir wert.

Tatsächlich bekomme ich irgendwelche dubiosen Anrufe (etwa 1-2x/Monat derzeit) eigentlich nur auf die Geschäfts-Nummer, und bin froh darüber, dass meine Privat-Nummer offenbar sicher ist.

Es ist immer gut, wenn du für Fall des Falles einen Plan B oder einen Notfall-Plan hast.

Diskussion zum Tutorial