HTML Links

HTML Links sind ein grundlegendes Element des Webs. Sie ermöglichen es Benutzern, zwischen verschiedenen Seiten und Ressourcen zu navigieren. In diesem Artikel werden wir die verschiedenen Arten von Links in HTML erläutern, deren Syntax vorstellen und häufig gestellte Fragen beantworten.

1. Was sind HTML Links?

HTML-Links, auch Hyperlinks genannt, sind anklickbare Elemente, die es Benutzern ermöglichen, zu einer anderen Seite, einem anderen Abschnitt oder einer anderen Ressource zu navigieren. Links werden durch das <a>-Tag (Anchor-Tag) erstellt.

2. Grundlegende Syntax

Die grundlegende Syntax für einen HTML-Link sieht folgendermaßen aus:

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

• href: Das Attribut, das die Ziel-URL angibt, zu der der Link führt.
• Link-Text: Der Text, der im Browser angezeigt wird und anklickbar ist.

Beispiel:

<a href="https://www.example.com">Besuchen Sie unsere Webseite</a>

3. Arten von Links

3.1. Externe Links

Externe Links führen zu einer anderen Webseite. Sie verwenden eine vollständige URL.

Beispiel:

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

3.2. Interne Links

Interne Links führen zu einer anderen Seite innerhalb der gleichen Webseite. Sie verwenden relative URLs.

Beispiel:

<a href="about.html">Über uns</a>

3.3. Ankerlinks

Ankerlinks führen zu einem bestimmten Abschnitt innerhalb derselben Seite. Sie verwenden ein # gefolgt von der ID des Ziels.

Beispiel:

<a href="#section1">Gehe zu Abschnitt 1</a>

<!-- Später im HTML-Dokument -->
<h2 id="section1">Abschnitt 1</h2>

3.4. E-Mail-Links

E-Mail-Links ermöglichen es Benutzern, eine E-Mail zu senden, indem sie auf den Link klicken. Sie verwenden das mailto:-Schema.

Beispiel:

<a href="mailto:[email protected]">E-Mail senden</a>

3.5. Telefon-Links

Telefon-Links ermöglichen es Benutzern, eine Telefonnummer anzurufen, indem sie auf den Link klicken. Sie verwenden das tel:-Schema.

Beispiel:

<a href="tel:+491234567890">Rufen Sie uns an</a>

4. Link-Attribute

Es gibt mehrere nützliche Attribute, die Sie zu Links hinzufügen können, um deren Verhalten zu steuern:

4.1. target

Das target-Attribut bestimmt, wo das verlinkte Dokument geöffnet wird. Die gängigsten Werte sind:

• _self: (Standard) öffnet den Link im selben Fenster.
• _blank: öffnet den Link in einem neuen Tab oder Fenster.
• _parent: öffnet den Link im übergeordneten Frame.
• _top: öffnet den Link im gesamten Browserfenster.

Beispiel:

<a href="https://www.example.com" target="_blank">Öffne in neuem Tab</a>

4.2. rel

Das rel-Attribut definiert die Beziehung zwischen der aktuellen und der verlinkten Seite. Besonders nützlich ist es in Kombination mit target="_blank".

• noopener: verhindert, dass die neue Seite auf das ursprüngliche Fenster zugreifen kann.
• noreferrer: verhindert das Senden der Referenz-URL an die verlinkte Seite.

Beispiel:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Sichere externe Verbindung</a>

5. Stil von Links

Sie können Links mit CSS gestalten, um deren Aussehen anzupassen. Hier sind einige gängige CSS-Stile für Links:

/* Standard-Link */
a {
    color: blue;
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Link bei Hover */
a:hover {
    color: darkblue;
    text-decoration: underline; /* Fügt Unterstreichung hinzu */
}

/* Besuchte Links */
a:visited {
    color: purple;
}

/* Aktiver Link */
a:active {
    color: red;
}

Häufig gestellte Fragen (FAQ)