Wie erstelle ich einen Zurück-Button in HTML?

Verwende JavaScript: Zurück oder als Link: Zurück . Für einen Link zur vorherigen Seite ist auch Zurück möglich.

Gibt es einen nativen Zurück-Button in HTML?

HTML hat keinen nativen Zurück-Button. Die Funktion wird über JavaScript mit window.history.back() oder history.go(-1) realisiert. Alternativ kann ein normaler Link auf eine bestimmte Seite gesetzt werden.

HTML Zurück-Button und -Link erstellen

Marius Marzian • 18. September 2021 • 2 Min. Lesezeit

Icon: Code-Klammern – Symbol für Webentwicklung und Programmierung

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

HTML Zurück-Button als Link

Der Sprung zur vorherigen Seite kann z.B. als Textlink umgesetzt werden. Dazu muss folgender Code in das HTML eingebaut werden:

<a href="javascript:history.back()">Zurück</a>

HTML Zurück-Button als Button dargestellt

Falls der zurück-Button auch tatsächlich als Button dargestellt werden soll, kannst du dies mit folgendem HTML Code ermöglichen:

<input type="button" value="Zurück" onClick="javascript:history.back()">

Zurück-Button in WordPress einbauen

Obigen Button bzw. Code-Schnipsel kannst du natürlich auch in WordPress einbauen. Wichtig zu wissen ist aber, dass du den Code-Schnipsel in dem Text-Editor nicht im Modus „visuell“ einfügen darfst, sondern zuerst den Editor auf den Modus „Text“ (rechts oben) umschalten musst. Nur im Text-Modus kannst du HTML Code einfügen.

Alternativ kannst du auch den Button per Shortcode einzubauen.

HTML Zurück Button als Shortcode für WordPress

Füge folgenden Code-Schnipsel in deine functions.php Datei deines (Child-)Themes ein:

function add_back_button_shortcode() { return '<a href="javascript:history.back();">Zurück</a>'; } add_shortcode( 'back_button', 'add_back_button_shortcode' );

Dann kannst du mit dem Shortcode [back_button] den zurück-Button in deine WordPress Seite einfügen.

Link zur Quelle

Zurück-Navigation erweitern und anpassen

JavaScript-Fallback

onclick="history.back()" funktioniert nur, wenn der Nutzer tatsächlich eine Seite zuvor besucht hat. Für Direkteinstiege (z.B. via Google) ergänze einen Fallback-Link auf die Startseite oder Übersichtsseite.

Barrierefreiheit (ARIA)

Vergib dem Link ein aria-label="Zurück zur Übersicht", damit Screenreader-Nutzer verstehen, wohin der Button führt. Ein reines Pfeil-Icon ohne Text ist ohne ARIA nicht zugänglich.

Styling mit Divi

In Divi kannst du einen Button mit der OIT-Klasse oit-btn als Zurück-Button stylen und das href="javascript:history.back()" direkt im URL-Feld des Buttons eintragen.