Hyperlinks in HTML

Was sind Hyperlinks?

Hyperlinks verbinden Webseiten miteinander. Mit dem HTML-Element <a> können Links zu anderen Webseiten, Dateien, E-Mail-Adressen oder bestimmten Bereichen einer Seite erstellt werden.

1. Links zu anderen Webseiten

Das Attribut href enthält die Zieladresse eines Hyperlinks.

HTML-Code

<a href="https://www.wikipedia.org">
    Wikipedia besuchen
</a>

Ergebnis

2. Links in einem neuen Tab öffnen

Mit target="_blank" wird die Zielseite in einer neuen Registerkarte geöffnet.

HTML-Code

<a href="https://www.mozilla.org"
   target="_blank"
   rel="noopener noreferrer">
    Mozilla öffnen
</a>

Ergebnis

3. Sprungmarken innerhalb einer Webseite

Sprungmarken ermöglichen die Navigation zu bestimmten Abschnitten einer Webseite. Dafür wird einem Element eine ID zugewiesen.

HTML-Code

<a href="#kontakt">
    Zum Kontakt springen
</a>

<h2 id="kontakt">Kontakt</h2>

Ergebnis

Zum Kontaktbereich springen

Beim Anklicken springt der Browser zum Kontaktbereich am Ende dieser Seite.

4. Links zu Dateien

Mit einem Hyperlink können Dateien geöffnet oder heruntergeladen werden. Das Attribut download fordert den Browser zum Herunterladen der Datei auf.

HTML-Code

<a href="/downloads/beispiel.txt"
   download>
    Beispieldatei herunterladen
</a>

Ergebnis

Hinweis: Die Datei beispiel.txt muss im Ordner downloads vorhanden sein.

5. E-Mail-Links

Mit mailto: kann das E-Mail-Programm des Benutzers geöffnet werden. Zusätzlich kann ein Betreff angegeben werden.

HTML-Code

<a href="mailto:beispiel@example.com?subject=Kontakt">
    E-Mail schreiben
</a>

Ergebnis

6. Grafiken als Hyperlinks

Auch Bilder können als Hyperlinks verwendet werden. Dazu wird das img-Element innerhalb eines a-Elements eingefügt.

HTML-Code

<a href="/html/grafiken.php">
    <img src="/images/landschaft.jpg"
         alt="Zur Grafikenseite"
         width="250">
</a>

Ergebnis

Klicken Sie auf das Bild, um zur Seite Grafiken zu gelangen.

7. Image-Maps

Mit einer Image-Map können verschiedene Bereiche eines Bildes unterschiedliche Links enthalten. Dazu werden die Elemente map und area verwendet.

HTML-Code

<img
    src="/images/landschaft.jpg"
    alt="Interaktive Grafik"
    width="400"
    height="250"
    usemap="#bildkarte"
>

<map name="bildkarte">
    <area
        shape="rect"
        coords="0,0,200,250"
        href="/html/grafiken.php"
        alt="Grafiken"
    >

    <area
        shape="rect"
        coords="200,0,400,250"
        href="/html/listen.php"
        alt="Listen"
    >
</map>

Ergebnis

Die linke Bildhälfte führt zur Seite Grafiken, die rechte Bildhälfte zur Seite Listen. Die Koordinaten beziehen sich auf die Bildgröße von 400 × 250 Pixeln.

8. Übersicht der wichtigsten Attribute

Kontakt

Dies ist das Sprungziel aus Beispiel 3.

Zurück nach oben

9. Praktische Übungen

<a></a>

<a href="https://www.wikipedia.org">
    Wikipedia besuchen
</a>

href

<a href="https://www.mozilla.org"
   target="_blank">
    Mozilla öffnen
</a>

rel="noopener noreferrer"

<a href="#kontakt">
    Zum Kontakt
</a>

<h2 id="kontakt">
    Kontakt
</h2>

<a href="/downloads/datei.pdf"
   download>
    Datei herunterladen
</a>

<a href="mailto:max@example.com">
    E-Mail schreiben
</a>

<a href="/html/grafiken.php">
    <img src="/images/landschaft.jpg"
         alt="Grafiken"
         width="250">
</a>

<map>
<area>

usemap

<area
    shape="rect"
    coords="0,0,200,250"
    href="/html/grafiken.php"
    alt="Grafiken"
>

Zusammenfassung

Hyperlinks sind ein wichtiger Bestandteil jeder Webseite. Sie ermöglichen die Navigation zwischen Webseiten, den Download von Dateien, das Öffnen von E-Mail-Programmen und die Verwendung von Bildern als Links.