Uncategorized

HTML-Button-Href: So verlinken Sie Schaltflächen

Foto des Autors

By Jan

Funktionsweise von HTML-Button-Href

Wenn du eine Schaltfläche auf deiner Webseite erstellen möchtest, die zu einer anderen Seite oder einem anderen Bereich verlinkt, kannst du das HTML-Attribut href verwenden. Das href-Attribut gibt die URL oder den Dateinamen der Zielseite an, zu der die Schaltfläche leiten soll.

Wenn du auf eine Schaltfläche mit einem href-Attribut klickst, sendet dein Webbrowser eine Anfrage an den Server, auf dem die Zielseite gehostet ist. Der Server sendet dann die Zielseite zurück an deinen Browser, der sie anzeigt.

So funktioniert das href-Attribut

Das href-Attribut kann sowohl in <a>-Tags (für Hyperlinks) als auch in <button>-Tags (für Schaltflächen) verwendet werden. Wenn du einen Link zu einer externen Webseite erstellst, musst du eine absolute URL angeben, die das gesamte Protokoll (z. B. https:), den Domainnamen und den Pfad zur Seite enthält. Wenn du zu einer anderen Seite auf deiner eigenen Website verlinkst, kannst du eine relative URL verwenden, die nur den Pfad zur Seite enthält.

Hier ist ein Beispiel für eine Schaltfläche mit einem href-Attribut, das zu einer externen Webseite verlinkt:

<button type="button" href="https://www.example.com">Klicke hier</button>

Wenn du auf diese Schaltfläche klickst, wird dein Browser die Webseite https://www.example.com aufrufen.

Verwendung von href in <button>-Tags

Wenn du das href-Attribut in einem <button>-Tag verwendest, ist es wichtig, den Typ der Schaltfläche mit dem Attribut type anzugeben. Der Standardtyp für Schaltflächen ist submit, was bedeutet, dass die Schaltfläche ein Formular absendet, wenn darauf geklickt wird. Wenn du eine Schaltfläche erstellen möchtest, die zu einer anderen Seite verlinkt, musst du den Typ button angeben, wie im obigen Beispiel gezeigt.

Verwendung von HTML-Button-Href zur Verlinkung von Schaltflächen

Wie man HTML-Button-Href verwendet

Um eine Schaltfläche mit HTML-Button-Href zu verlinken, verwendest du das href-Attribut in deinem <button>-Tag. Der Wert des href-Attributs ist die URL der Seite, zu der die Schaltfläche führen soll.

Schritt-für-Schritt-Anleitung

  1. Erstelle ein <button>-Tag.

  2. Füge das href-Attribut mit dem Wert der Ziel-URL hinzu.

  3. Schließe das <button>-Tag.

Beispiel

Der folgende Code erstellt eine Schaltfläche, die dich zu Google.com führt:

<button href="https://www.google.com">Zu Google</button>

Alternative Verwendungen

Neben der Verlinkung zu externen Websites kannst du HTML-Button-Href auch verwenden, um:

  • Innerhalb einer Seite zu verlinken: Verwende Anker (#) in deinem href-Wert, um auf einen bestimmten Abschnitt derselben Seite zu verweisen.
  • Dateien herunterladen: Verwende den Wert href="data:[mime-type];base64,[base64-encoded-data]" im href-Attribut, um eine Datei herunterzuladen.
  • E-Mails senden: Verwende den Wert href="mailto:[email-address]" im href-Attribut, um ein E-Mail-Fenster zu öffnen.
  • JavaScript ausführen: Verwende den Wert href="javascript:void(0);" im href-Attribut und füge eine JavaScript-Funktion im onclick-Ereignishandler hinzu, um benutzerdefinierte Aktionen auszuführen.

Attribute für HTML-Button-Href

id

Die id stellt einen eindeutigen Bezeichner für die Schaltfläche bereit, damit du sie über JavaScript oder CSS ansprechen kannst.

class

Mit dem class-Attribut kannst du eine oder mehrere Klassen an die Schaltfläche anhängen. Dies ist hilfreich, wenn du Stile für mehrere Schaltflächen auf deiner Seite festlegen möchtest.

name

Das name-Attribut definiert den Namen der Schaltfläche, mit dem du sie in Formularen verwenden kannst.

value

Das value-Attribut gibt den Wert der Schaltfläche an, der bei Klick auf die Schaltfläche übermittelt wird. Dies ist nützlich, wenn du die Schaltfläche verwendest, um Daten an einen Server zu senden.

target

Mit dem target-Attribut kannst du das Ziel festlegen, in dem der Link geöffnet werden soll. Beispielsweise kannst du festlegen, dass der Link in einem neuen Fenster oder Tab geöffnet werden soll.

rel

Das rel-Attribut gibt die Beziehung zwischen dem aktuellen Dokument und dem verlinkten Dokument an. Zu den gängigen Werten gehören:

  • alternate: Eine alternative Version des aktuellen Dokuments
  • noopener: Verhindert das Öffnen von Popups oder neuen Fenstern
  • noreferrer: Sendet keine Referrer-Informationen an den verlinkten Server

aria-label

Das aria-label-Attribut bietet einen zugänglichen Namen für die Schaltfläche, der von Hilfstechnologien wie Bildschirmlesegeräten verwendet wird.

Linktypen in HTML-Button-Href

Externer Link

Mit einem externen Link verweist du auf eine Ressource außerhalb deiner Website, wie z. B. eine andere Website, eine PDF-Datei oder eine Bilddatei.

<button type="button" href="https://beispiel.de">Externen Link öffnen</button>

Interner Link

Ein interner Link verweist auf eine andere Seite deiner eigenen Website.

<button type="button" href="/kontakt">Kontaktseite öffnen</button>

Anchor Link

Ein Anchor-Link verweist auf eine bestimmte Stelle auf der aktuellen Seite. Du kannst dazu die id des Elements verwenden, zu dem du verlinken möchtest.

<!-- Ziel-Element -->
<h2 id="beispiel">Beispiel-Überschrift</h2>

<!-- Verlinkender Button -->
<button type="button" href="#beispiel">Zur Überschrift springen</button>

Mailto-Link

Ein Mailto-Link öffnet einen E-Mail-Client mit einer vordefinierten E-Mail-Adresse.

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

Telefonnummer-Link

Ein Telefonnummer-Link öffnet eine Telefonanruf-App mit einer vordefinierten Telefonnummer.

<button type="button" href="tel:+49123456789">Anrufen</button>

Unterschied zwischen HTML-Button-Href und anderen Verknüpfungsmethoden

HTML-Button-Href unterscheidet sich von anderen Verknüpfungsmethoden in mehreren wichtigen Aspekten:

Semantik und Stil

Im Gegensatz zu Anchor-Tags () gibt ein Button-Element (

Unwiderstehliche HTML-E-Mail-Vorlagen für unvergessliche Kampagnen

Beherrsche HTML: Online-Editoren für einfaches Codieren und Webentwicklung

Schreibe einen Kommentar