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

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.

Für mehr Details, lies auch: HTML für Anfänger: Der Weg zu Webentwicklung

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.

Mehr dazu erfährst du in: Wie man ein Bild in HTML einfügt: Eine Schritt-für-Schritt-Anleitung

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 () deutlich an, dass es sich um einen klickbaren Button handelt. Die Standarddarstellung eines Buttons ist ein hervorgehobener Rahmen mit Text in der Mitte. Dies macht es für Benutzer einfacher, interaktive Elemente auf einer Webseite zu identifizieren.

Mehr Informationen findest du hier: HTML-Dokumente: Fundamente des Webs

Barrierefreiheit

Button-Elemente sind in der Regel barrierefreier als Anchor-Tags, da sie mit der Tastatur zugänglich sind. Benutzer mit eingeschränkter Mobilität können die Tabulatortaste verwenden, um zu einem Button zu navigieren und ihn mit der Eingabetaste zu aktivieren.

Ereignisbehandlung und Formulareinreichung

Button-Elemente ermöglichen eine einfachere Ereignisbehandlung. Du kannst Ereignis-Listener für Klicks, Mausbewegungen und andere Interaktionen festlegen. Im Gegensatz dazu können Anchor-Tags nur für Klickereignisse verwendet werden. Darüber hinaus können Button-Elemente verwendet werden, um Formulare einzureichen, während Anchor-Tags dies nicht können.

Linktyp

Während Anchor-Tags Links zu internen oder externen URLs, E-Mail-Adressen oder Dateien herstellen können, ist der Linktyp für HTML-Button-Href auf URLs beschränkt.

Unterstützung für ARIA-Attribute

Button-Elemente unterstützen ARIA-Attribute (Accessible Rich Internet Applications), mit denen zusätzliche Informationen für assistive Technologien bereitgestellt werden können. Dies ermöglicht eine bessere Barrierefreiheit für Benutzer mit Behinderungen.

Zusammenfassend lässt sich sagen, dass HTML-Button-Href eine spezifischere und barrierefreiere Methode zum Verlinken von Schaltflächen bietet, die Ereignisbehandlung und Formulareinreichung ermöglicht.

Vorteile von HTML-Button-Href

HTML-Button-Href bietet eine Reihe von Vorteilen gegenüber anderen Verknüpfungsmethoden:

Verbesserte Benutzerfreundlichkeit

• Eindeutiger Aufruf zum Handeln: Schaltflächen sind ein klares Signal für Benutzer, mit dem verlinkten Inhalt zu interagieren.
• Barrierefreiheit: Schaltflächen sind über Tastatur und Maus zugänglich, wodurch sie für Personen mit eingeschränkter Mobilität benutzerfreundlich werden.
• Visuelles Feedback: Schaltflächen können visuell gestaltet werden, um einen Aufruf zum Handeln zu betonen und die Aufmerksamkeit des Benutzers zu erregen.

Suchmaschinenoptimierung (SEO)

• Relevante Ankertexte: Der Text des Schaltflächen-Labels kann als Ankertext für den Link fungieren, der deine Website für relevante Keywords optimieren kann.
• Verbesserte Crawlbarkeit: Suchmaschinen können Schaltflächen-Links leichter erkennen und crawlen, was zu einer besseren Indexierung deiner Website führt.

Einfach zu implementieren

• Unkomplizierter Code: Die Implementierung von HTML-Button-Href ist unkompliziert und erfordert nur grundlegende HTML-Kenntnisse.
• Unterstützung in allen Browsern: HTML-Button-Href wird von allen gängigen Browsern unterstützt, was die Konsistenz und Kompatibilität gewährleistet.

Vielseitigkeit

• Formularübermittlung: Du kannst Schaltflächen verwenden, um Formulare zu übermitteln und Daten an den Server zu senden.
• Modale Fenster: Schaltflächen können zum Öffnen von modalen Fenstern verwendet werden, die zusätzliche Inhalte oder Funktionen bieten.
• Dropdown-Menüs: Schaltflächen können als Auslöser für Dropdown-Menüs verwendet werden, die eine hierarchische Navigation ermöglichen.

Stil und Anpassbarkeit

• Gestaltungsmöglichkeiten: Du kannst Schaltflächen mit CSS stilisieren, um ihr Erscheinungsbild anzupassen und sie visuell ansprechend zu gestalten.
• Anpassbare Aktionen: Du kannst festlegen, welche Aktion beim Klicken auf eine Schaltfläche ausgelöst werden soll, z. B. das Weiterleiten zu einer anderen Seite oder das Ausführen einer JavaScript-Funktion.

Beispiele für die Verwendung von HTML-Button-Href

Einfacher Link zu einer internen Seite

<button type="button">
  <a href="/über-uns">Über uns</a>
</button>

Dieser Code erstellt eine Schaltfläche mit dem Text "Über uns". Wenn du auf die Schaltfläche klickst, gelangst du zur Seite "/über-uns" auf derselben Website.

Weiterführende Informationen gibt es bei: HTML für Anfänger: Die Grundlagen erlernen

Externer Link zu einer anderen Website

<button type="button">
  <a href="https://www.example.com">Beispiel-Website</a>
</button>

Dieser Code erstellt eine Schaltfläche mit dem Text "Beispiel-Website". Wenn du auf die Schaltfläche klickst, gelangst du zur externen Website "www.example.com".

Öffnet ein neues Browserfenster

<button type="button">
  <a href="/neues-fenster" target="_blank">Neues Fenster</a>
</button>

Dieses Beispiel verwendet das target-Attribut, um das Ziel des Links anzugeben. Wenn du auf die Schaltfläche klickst, wird die Seite "/neues-fenster" in einem neuen Browserfenster oder -tab geöffnet.

Übermittlung eines Formulars

<form action="/formular-senden">
  <button type="submit">Senden</button>
</form>

In diesem Beispiel wird das href-Attribut nicht verwendet, da die Schaltfläche ein Formular übermittelt. Wenn du auf die Schaltfläche "Senden" klickst, wird das Formular an die angegebene Aktion ("/formular-senden") übermittelt.

Aufrufen von JavaScript-Code

<button type="button" onclick="alert('Hallo Welt!')">
  Alert anzeigen
</button>

Dieses Beispiel verwendet das onclick-Attribut, um JavaScript-Code auszuführen, wenn auf die Schaltfläche geklickt wird. Wenn du auf die Schaltfläche "Alert anzeigen" klickst, wird ein Alert-Fenster mit der Meldung "Hallo Welt!" angezeigt.

Fehlerbehebung bei HTML-Button-Href

Wenn du Probleme mit HTML-Button-Href hast, kannst du die folgenden Schritte zur Fehlerbehebung durchführen:

Kein Link beim Klicken auf die Schaltfläche

• Überprüfe, ob du das href-Attribut korrekt gesetzt hast. Es sollte einen gültigen URL oder einen Fragment-Identifier enthalten (z. B. #mein-Anker).
• Stelle sicher, dass der Link auf eine existierende Seite oder ein gültiges Ankerziel verweist.
• Überprüfe, ob irgendwelche CSS-Regeln oder JavaScript-Ereignisse den Link überschreiben.

Schaltfläche wird nicht als Link angezeigt

• Überprüfe, ob du die richtige HTML-Syntax verwendest. Die Schaltfläche sollte innerhalb eines <button>-Tags definiert sein.
• Stelle sicher, dass die Schaltfläche nicht als deaktiviert (disabled) gekennzeichnet ist.
• Überprüfe, ob der Browser den HTML-Code korrekt interpretiert. Versuche, den Code in einem anderen Browser oder mit einem HTML-Validator zu validieren.

Der Link wird nicht im neuen Tab geöffnet

• Überprüfe, ob du das target-Attribut korrekt gesetzt hast (z. B. target="_blank").
• Überprüfe, ob dein Browser das target-Attribut unterstützt.
• Stelle sicher, dass keine JavaScript-Ereignisse das Öffnen in einem neuen Tab verhindern.

Andere Fehler

• Überprüfe, ob du eine gültige URL eingegeben hast.
• Überprüfe, ob der Server die angeforderte Seite zurückgibt.
• Versuche, die Schaltfläche in einem anderen Browser oder auf einem anderen Gerät zu testen.

Verwandte Artikel

• HTML-Link-Tag: Der Schlüssel zur Verknüpfung im Web
• HTML-Bild mit Link: Schritt-für-Schritt-Anleitung zum Verlinken von Bildern im Web
• So fügst du schnell und einfach Emojis in deine HTML-Dokumente ein
• HTML-Vorschau: Visualisiere deinen Code sofort
• Der ultimative Leitfaden zur Verwendung von HTML-Schaltflächen für Formulareingaben
• HTML-Button-Links: Erstellen Sie aufgeräumte und dynamische Webformulare
• HTML-Code: Grundlagen für Webentwickler
• HTML-Tabs: Eine umfassende Anleitung zur Verwendung von Registerkarten in Ihren Webseiten
• HTML-Pfeile: Erstellen und Anpassen von Richtungshinweisen auf Ihrer Website
• Link rel preload: Erhöhen Sie die Ladegeschwindigkeit Ihrer Website
• HTML bearbeiten: Schritt-für-Schritt-Anleitung für Anfänger
• Das HTML -Element: Erstellen von Dropdowns und Auswahllisten
• Margin HTML: Optimieren Sie Abstände und Layouts auf Ihrer Website

Folge uns

Neue Posts

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts