Zum Hauptinhalt springen

Funktionsweise von Links in HTML: Highlights und Verwendungsmöglichkeiten

HTML ist eine Auszeichnungssprache, mit der Sie Webseiten erstellen und deren Struktur beschreiben können. Eine der wichtigsten Funktionen von HTML besteht darin, Links zu erstellen, mit denen Benutzer von einer Seite zur anderen wechseln können. Die Funktionsweise von Links in HTML basiert auf der Verwendung eines Tags .

Kennung definiert einen Hyperlink oder einen Link in einem HTML-Dokument. Attribut href gibt die Adresse der Seite an, zu der beim Klicken auf den Link navigiert werden soll. Dabei wird der Text zwischen dem öffnenden und dem schließenden Tag eingeschlossen , wird anklickbar und wird dem Benutzer als unterstrichener und blauer Text angezeigt, um Aufmerksamkeit zu erregen.

Neben der Adresse der Seite kann ein Link in HTML auch andere Attribute enthalten, z. B. target, der angibt, wie die Seite geöffnet wird (im aktuellen Fenster oder in einem neuen Tab), sowie ein Attribut title um eine Quickinfo mit zusätzlichen Informationen über den Link anzuzeigen, wenn Sie den Mauszeiger bewegen. Mithilfe dieser und anderer Attribute können Sie das Verhalten und Aussehen von Links auf einer Webseite weiter anpassen.

Wie funktionieren Links in HTML?

Links in HTML werden verwendet, um Referenzelemente zu erstellen, die es Benutzern ermöglichen, von einer Webseite zur nächsten zu wechseln. Links können verwendet werden, um auf andere Webseiten, Dateien, Bilder, E-Mail-Adressen und andere Ressourcen im Internet zu verweisen.

Zusätzlich zum href-Attribut können Sie Links weitere Attribute hinzufügen, um ihr Verhalten zu steuern. Mit dem target-Attribut können Sie festlegen, wie die Zielressource im aktuellen Fenster oder in einem neuen Fenster oder einer neuen Browserregisterkarte geöffnet wird. Mit dem title-Attribut können Sie eine Quickinfo angeben, die angezeigt wird, wenn Sie auf einen Link zeigen.

Der Linktext kann als normaler Text angezeigt oder mit oder-Tags hervorgehoben werden. Das Tag macht den Linktext fett und das Tag kursiv.

Definieren eines Links in HTML

Die Syntax des Link-Tags lautet wie folgt:

AttributBedeutungDie Beschreibung
hrefURLGibt die Adresse an, an die der Übergang erfolgen soll
target_blank
_self
_parent
_top
Legt fest, in welchem Fenster oder Rahmen die neue Seite geöffnet wird

Beispiel für die Verwendung eines Link-Tags:

Dieser Code erstellt einen Link zu einer Webseite mit der Adresse "https://www .example.com" und wenn Sie darauf klicken, wird die Seite je nach Browsereinstellungen in einem neuen Tab oder Fenster geöffnet.

Das Link-Tag kann nicht nur zum Navigieren zu anderen Seiten verwendet werden, sondern auch zum Erstellen interner Links zu Ankern und Orten auf derselben Seite. In diesem Fall wird das href-Attribut mit # und der Element-ID angegeben:

Перейти к разделу 1. 

Раздел 1

Wenn Sie auf den Link klicken, wird die Seite zu einem Abschnitt mit der ID "section-1" geführt.

Verknüpfungsattribute

Grundlegende Attribute für Links:

  • href: gibt die URL (URL) der Seite oder Ressource an, zu der der Benutzer beim Klicken auf den Link gelangt. Die Adresse kann absolut (mit dem vollständigen Pfad zur Seite oder Ressource) oder relativ (relativ zur aktuellen Seite) sein.
  • target: gibt das Fenster oder den Rahmen an, in dem die Zielseite oder Ressource geöffnet wird. Der Attributwert kann "_blank" (in neuem Fenster öffnen), "_self" (im aktuellen Fenster öffnen), "_parent" (im übergeordneten Fenster öffnen) oder "_top" (im oberen Fenster öffnen) lauten.
  • title: fügt dem Link eine Quickinfo hinzu, die angezeigt wird, wenn Sie den Mauszeiger darüber bewegen. Die Quickinfo kann zusätzliche Informationen oder eine Beschreibung der Zielseite oder Ressource enthalten.
  • download: legt den Dateinamen für den Download fest, wenn Sie auf den Link klicken. Dieses Attribut ist nützlich, wenn der Link zu einer Datei führt, die heruntergeladen und nicht im Browser geöffnet werden soll.

Beispiel für die Verwendung von Verknüpfungsattributen:

In diesem Beispiel wird ein Verweis mit der Adresse erstellt"http://www.example.com ", die in einem neuen Fenster geöffnet wird, und wenn Sie den Mauszeiger darüber bewegen, wird eine Quickinfo "Referenzbeispiel" angezeigt.

Durch die Verwendung von Linkattributen können Sie flexiblere, interaktive und informative Elemente auf Ihrer Website erstellen.

Relative und absolute Referenzen

Es gibt zwei Arten von Links in HTML: relativ und absolut. Jeder hat seine eigenen Verwendungsmerkmale.

Relative Links werden verwendet, um den Pfad zu einer Datei oder Seite relativ zum aktuellen Speicherort anzugeben. Sie können vollständig sein, dh den vollständigen Pfad vom Stamm der Site enthalten, oder relativ, dh den Pfad relativ zur aktuellen Datei oder zum aktuellen Verzeichnis angeben. Wenn Sie sich beispielsweise auf der Seite "index" befinden.html" und möchten auf die Datei "about" verweisen.html", dann genügt es, einfach "about" anzugeben.html" im href-Attribut des Links.

Absolute Links enthalten dagegen die vollständige URL (URL) der Seite, zu der Sie navigieren möchten. Sie beginnen mit einem Protokoll (z. B. "http://" oder "https://") und geben unbedingt den Domain-Namen der Website an. Alle zusätzlichen Pfade und Parameter werden ebenfalls in absoluten Referenzen angegeben. Zum Beispiel ein Link zu einer Seite "https://example.com/about .html" wird die gleiche URL im href - Attribut haben.

Relative Links werden normalerweise beim Erstellen von Weblinks bevorzugt, da sie die Dateipfade einfach ändern und die Website zu einer anderen Domäne migrieren können, ohne dass alle Links korrigiert werden müssen. Absolute Links werden häufiger für Links zu externen Ressourcen verwendet oder wenn Sie die Adresse einer Seite genau angeben möchten.

ReferenztypEin Beispiel
Relative Referenz Über das Unternehmen
Absolute Referenz Über das Unternehmen

Es ist wichtig zu beachten, dass Links in HTML auf verschiedene Objekte wie Seiten, Bilder, Sounds und JavaScript-Dateien verweisen können. Im allgemeinen Sinne bleibt das Funktionsprinzip von Links jedoch unverändert.

Öffnen von Links in einem neuen Fenster

Um die Verknüpfung in einem neuen Fenster zu öffnen, müssen Sie das target-Attribut mit dem Wert _blank verwenden. Zum Beispiel:

Wenn Sie auf diesen Link klicken, öffnet der Browser eine neue Registerkarte oder ein neues Fenster mit der im href-Attribut angegebenen Seite.

Es ist wichtig zu beachten, dass das Öffnen von Links in einem neuen Fenster in einigen Fällen unerwünscht sein kann, z. B. beim Zugriff auf wichtige Informationen oder Formulare. Daher sollten Sie bei der Anwendung dieser Funktion vorsichtig sein.

Neben den _blank-Werten kann das target-Attribut auch andere Werte annehmen, z. B. _self (im aktuellen Fenster öffnen), _parent (im übergeordneten Fenster öffnen) und _top (im oberen Fenster öffnen).

Das Öffnen von Links in einem neuen Fenster ist daher eine Möglichkeit, die Benutzererfahrung mit der Website zu verbessern, indem Sie schnell auf Links klicken können, ohne zur vorherigen Seite zurückkehren zu müssen.

Anker verwenden

Um einen Anker zu erstellen, wählen Sie eine eindeutige ID für das Element aus, auf das Sie verweisen möchten. Normalerweise werden Anker mit einem Tag verwendet, das über ein href - Attribut verfügt. Der href-Wert wird durch das Zeichen # gefolgt von der ID des Elements angegeben:

Wenn Sie auf einen solchen Link klicken, wird die Seite zu dem Element mit der angegebenen ID gescrollt:

Anker

Wenn Sie einen Anker auf einer anderen Seite erstellen möchten, müssen Sie anstelle des Zeichens # die vollständige URL dieser Seite im href-Attribut angeben :

Anker können zum Erstellen von Inhaltstabellen, Navigationsleisten oder zum einfachen Navigieren durch Seiten verwendet werden. Sie helfen Ihnen, die Benutzeroberfläche Ihrer Website für die Benutzer benutzerfreundlicher und intuitiver zu gestalten.