Beispiel Textauszeichnung: Links

Mit dem Tag <a> wird ein Link erzeugt. Im Attribut href steht das Ziel des Links.

Das Attribut target="_blank" öffnet den Link in einem neuen Tab. Links können nicht nur auf andere Seiten verweisen, sondern auch Dateien verlinken, E-Mails öffnen oder zu Ankern auf derselben Seite springen.

Grundsätzlich unterscheidet man: relative Links (innerhalb desselben Dateisystems) und absolute Links (vollständige URL mit https://).

<!-- Relativ: Datei im selben Ordner -->
<a href="a_09_tags-textauszeichnung.html">zum Beispiel 09</a>

<!-- Absolut: externer Link, neuer Tab -->
<a href="https://www.w3schools.com" target="_blank">w3schools.com</a>

<!-- Datei verlinken -->
<a href="docs/info.pdf" target="_blank">PDF öffnen</a>

<!-- E-Mail-Link -->
<a href="mailto:info@beispiel.de">E-Mail senden</a>

<!-- Telefon-Link -->
<a href="tel:+497612036880">+49 761 203 68 80</a>

<!-- Anker: Sprung zu Element mit id="top" -->
<a href="#top">nach oben</a>

Navigations-Links

zum Beispiel 09 — öffnet eine HTML-Seite im selben Browser-Tab
zum Beispiel 09b (nicht gefunden) — kaputter Link auf eine nicht vorhandene Datei
w3schools.com — externer Link mit target="_blank", öffnet neuen Tab

Links zu Medien

PDF-Datei mit Links zum Kurs — Browser öffnet PDFs direkt
Download: Excel-Datei — Datei wird zum Abspeichern angeboten

Links mit CTA (Call to Action)

E-Mail senden — öffnet den installierten E-Mail-Client
ZfS anrufen: +49(0)761 203 68 80 — wählt die Nummer direkt (auf mobilen Geräten)

Anker – Sprungmarken innerhalb der Seite

Wenn ein HTML-Element das Attribut id="..." erhält, kann mit href="#id-name" direkt zu diesem Element gesprungen werden.

In diesem Beispiel hat das <header>-Element das Attribut id="top" — der Link unten springt dorthin.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

↑ nach oben