HTML <a> href-Attribut

HTML <a> Tag

Definition und Verwendung

href Das Attribut legt die URL der Seite fest, auf die der Link verweist.

href Der Wert des Attributs kann jede gültige relative oder absolute URL eines Dokuments sein, einschließlich eines Fragmentidentifiers und eines JavaScript-Codeabschnitts. Wenn der Benutzer den Inhalt des <a>-Tags auswählt, versucht der Browser, ihn abzurufen und anzuzeigen href Das Attribut definiert eine Liste von Dokumenten, die durch die angegebene URL dargestellt werden, oder durch JavaScript-Ausdrücke, Methoden und Funktionen ausgeführt werden.

Wenn href Falls das Attribut nicht existiert, wird der <a>-Tag kein Hyperlink sein.

Tipp:Verwenden Sie href="#top" oder href="#" um auf den oberen Bereich der aktuellen Seite zu verlinken!

Textverknüpfung erstellen

Eine einfache <a>-Schaltfläche, die auf andere Dokumente verweist, kann in folgender Form sein:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online-Tutorial</a>

Der Browser zeigt den Ausdruck "CodeW3C.com Online-Tutorial" (meistens in Unterstrich und blauer Farbe) mit speziellen Effekten an, so dass der Benutzer weiß, dass es sich um einen Hyperlink handelt, der auf andere Dokumente verlinkt.

CodeW3C.com Online-Tutorial

Der Benutzer kann auch die Optionen im Browser verwenden, um selbst die Textfarbe zu bestimmen und die Farbe des Textes vor und nach dem Link zu setzen.

Tipp:Man kann CSS-Pseudo-KlassenFügen Sie Texthyperlinks komplexe und vielfältige Stile hinzu.

Erstellen Sie einen Bildlink

Komplexe Anker können auch Bilder enthalten. Nachstehendes LOGO ist ein Bildlink, auf das geklickt werden kann, um zur Startseite von W3school zurückzukehren:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Der folgende Code fügt dem LOGO von CodeW3C.com einen Hyperlink zurück zur Startseite hinzu:

CodeW3C.com Online-Tutorial

Die meisten Grafikbrowser platzieren einen speziellen Rahmen um das Bild, das als Teil eines Ankers verwendet wird. Durch Angabe der Bildgröße in der <img>-Beschriftung des Bildes Rahmen-EigenschaftDurch Einstellen auf 0 kann der Rahmen eines Hyperlinks entfernt werden. Man kann auch CSS-RahmenattributeUm den Rahmenstil global zu ändern.

Beispiel

Beispiel 1

Die href-Eigenschaft legt das Ziel des Links fest:

<a href="https://www.codew3c.com">Besuchen Sie CodeW3C.com</a>

Try it yourself

Beispiel 2

Wie kann man ein Bild als Link verwenden:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Try it yourself

Beispiel 3

Wie kann man auf eine E-Mail-Adresse verlinken:

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

Try it yourself

Beispiel 4

Wie kann man auf eine Telefonnummer verlinken:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Try it yourself

Beispiel 5

Wie kann man auf eine andere Teil desselben Dokuments verlinken:

<a href="#section2">Zum Kapitel 2 springen</a>

Try it yourself

Beispiel 6

Wie kann man auf JavaScript verlinken:

<a href="javascript:alert('Hello World!');">Ausführen von JavaScript</a>

Try it yourself

Syntax

<a href="URL">

Attribute Value

Value Description
URL

The URL of the link.

Possible values:

  • Absolute URL - Points to another website (such as href="http://www.example.com/index.html")
  • Relative URL - Points to a file within the website (such as href="index.html")
  • Link to an element with a specified id in the page (such as href="#section2")
  • Other protocols (such as https://, ftp://, mailto:, file: etc.)
  • Scripts (such as href="javascript:alert('Hello');")

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <a> Tag