Link

Das <a>-Tag wird verwendet, um Hyperlinks zu erstellen, die es Nutzern ermöglichen, zwischen verschiedenen Webseiten zu navigieren. Wenn ein Nutzer auf einen Link klickt, sendet der Browser eine Anfrage an den Server für die mit dem Link verbundene Seite und zeigt die Antwort auf dem Bildschirm an. Das href-Attribut gibt die URL der Zielseite an.

Link-Attribute

target

Standardmäßig wird der Link im selben Browser-Tab geöffnet. Mit dem Attribut target kann dieses Verhalten angepasst werden. Um einen Link in einem neuen Tab zu öffnen, verwende target="_blank".

download

Das Attribut download kann mit dem HTML-Tag <a> verwendet werden, um anzugeben, dass die Zielressource heruntergeladen und nicht im Browser angezeigt werden soll. Wenn das Attribut download verwendet wird, fordert der Browser den Benutzer auf, die Datei unter dem angegebenen Dateinamen zu speichern. Zum Beispiel: Wenn ein Element erstellt werden soll, das beim Klicken auf den Link die Datei "myfile.pdf" von https://example.com/ herunterlädt und der Benutzer aufgefordert wird, sie unter dem Dateinamen myfile.pdf zu speichern.

href

Das Attribut href wird nicht nur verwendet, um zu anderen Seiten zu navigieren, sondern auch, um Links zu E-Mail-Adressen, Telefonnummern und bestimmten Abschnitten zu erstellen.

Zusätzlich kann das href-Attribut verwendet werden, um zu bestimmten Abschnitten innerhalb einer Webseite zu navigieren. Um einen Anker-Link zu erstellen, weist man dem gewünschten Abschnitt, zu dem gescrollt werden soll, ein id-Attribut (eine eindeutige Kennung) zu. Das href-Attribut erhält einen Wert, der mit dem Symbol # beginnt, gefolgt vom Wert der id.

Sehen wir uns das folgende Beispiel an, das in Form von CodeSandbox präsentiert wird. Diese Plattform ermöglicht die Code-Inspektion und erlaubt es, die Funktionsweise des Codes zu überprüfen.

Hinweis

Bitte überprüfen Sie die Funktionalität, indem Sie auf die Links klicken und beobachten, wie die Live-Seite zu den jeweiligen Abschnitten scrollt. Achten Sie außerdem auf die Attribute des a-Tags und des h2-Tags.

Um den Code anzuzeigen, ziehen Sie den Schieberegler auf der linken Seite des Code-Sandkastens. Dadurch wird der vorhandene Code im Editor sichtbar.

Button

Das <button>-Tag in HTML wird verwendet, um eine anklickbare Schaltfläche zu erstellen, die eine Aktion auslösen kann, wie zum Beispiel das Absenden eines Formulars, das Ausführen einer JavaScript-Funktion wie das Öffnen und Schließen eines Pop-up-Fensters oder das Umschalten eines mobilen Menüs. Standardmäßig besitzt das <button>-Tag das Attribut type, dessen Wert submit ist. Häufig ist es jedoch erforderlich, type="button" explizit anzugeben.

Zusammenfassung

Das <a>-Tag wird verwendet, um Hyperlinks zu anderen Webseiten, Dokumenten oder Ressourcen zu erstellen. Im Gegensatz dazu dient das <button>-Tag dazu, Interaktivität auf einer Webseite zu ermöglichen, ein Ereignis auszulösen oder eine Aktion auszuführen. Es ist wichtig, ihre Verwendungszwecke nicht zu vermischen.