Es gibt Tausende von Artikeln über Buttons und Links im Web; die Unterschiede und wie man sie richtig verwendet. Hey, das stört mich nicht. Ich habe auch meinen eigenen geschrieben¹.
Es ist ein so häufiger Fehler im Web, dass es sich immer lohnt, ihn zu wiederholen.
- Ist die Absicht, jemanden zu einer anderen URL zu schicken? Es ist ein Link in Form von
<a href="">. - Ist es, eine On-Page-Interaktion auszulösen? Es ist ein Button in Form von
<button>. - Jede Abweichung davon, und du solltest verdammt gut wissen, was du tust.
Eric Eggert schrieb kürzlich einen ziemlich guten Artikel mit einer netten Aussage, warum das wichtig ist.
Wenn du eine Tastatur hättest und deine "e"-Taste nur zu 90 % der Zeit funktionieren würde, wäre das ärgerlich. Zuverlässigkeit und Vertrauen in Benutzeroberflächen sind wichtig, damit Benutzer mit Leichtigkeit durch Inhalte und Anwendungen navigieren können. Wenn du die richtigen Elemente verwendest, unterstützt du die Benutzer.
Manuel Matuzović hat ein Button Cheat Sheet, das eine amüsante Lektüre darüber ist, warum buchstäblich alles andere als ein <button> nicht so gut ist wie ein Button. Manuel verlinkt Marcy Suttons epische The Links vs. Buttons Showdown (Video), in dem die beiden in einem Schein-Kampf gegeneinander antreten – „Wir werden zwei HTML-Elemente in einem Kreuzzug für besser und schlechter, richtig und möglicherweise falsch gegeneinander antreten. Ein Element wird mit der Leertaste ausgelöst, das andere mit der Eingabetaste. Wer wird gewinnen?“ Ich weiß nicht, ob ich lachen oder weinen soll, wie weit wir noch gehen müssen, um diese Informationen zu verbreiten.
- Ich denke, unser Artikel A Complete Guide to Links and Buttons ist ein ziemlich gutes Beispiel für anfängerfreundliche Inhalte, was mein Lieblingstil für das Schreiben und Veröffentlichen von Inhalten ist! Aber da es so viele anfängerfreundliche Inhalte im Web gibt, ist die Messlatte ziemlich hoch, wenn du einen Eindruck hinterlassen und genug SEO erzielen möchtest, damit ihn überhaupt jemand findet. Daher war die Idee in diesem Fall, groß zu denken und fast alles zu schreiben, was es über die technische Grundlage von Links und Buttons zu schreiben gibt. Wenn du ein Händchen für diese Art von Schreiben hast, melde dich auf jeden Fall.
Ich glaube, was nicht hilft, ist, dass jahrelang die de-facto-Methode zur Validierung eines Formulars die Verwendung eines Buttons war. Per Definition schickt ein Formular dich zu einer anderen URL (angegeben im "action"-Attribut), also sollte es nach deinen Regeln eigentlich wie ein Link funktionieren, was nicht dem Standardverhalten eines guten alten HTML-Formulars entspricht.
Das Lustige ist, wenn du dir das Formular ansiehst, in das ich gerade tippe, um einen Kommentar zu dieser Seite zu hinterlassen, wird es mich zu
/wp-comments-post.phpschicken, und obwohl das "POST COMMENT"-Ding technisch gesehen kein Link ist, verhält es sich irgendwie wie einer, da der Cursor beim Darüberfahren zur Zeigerhand wird, um anzuzeigen, dass ich die Seite wechsle... Das ist also okay, denke ich.Aber wenn ich mir jetzt die "Schreiben"- und "Vorschau"-Dinge am unteren Rand des Textfeldes ansehe, nun, sie sollten wirklich Buttons sein, weil sie mich nicht auf eine andere Seite weiterleiten... Und doch sind es gute alte
<a>-Tags mit dem Zeiger-Cursor.Also ja, ich schätze, wir werden das noch jahrelang diskutieren.
Etwas, das ich mich gefragt habe, weil ich es oft mache: Was ist mit dem Öffnen von Modals/Overlays (die statische Inhalte haben) mit einem
<a href="#thiscontent">? Semantisch ist es nur ein Link zu einem anderen Teil des Inhalts, auch wenn es am Ende wie ein Button aussieht und "On-Page-Interaktion" ist, aber das ist nur die Erscheinung.Wenn Javascript deaktiviert ist, kann das Modal mit CSS :target angezeigt werden. Wenn Javascript und CSS nicht aktiv sind, wird die Seite schön zum Inhalt scrollen.
Für mich macht das viel Sinn, aber vielleicht gibt es Aspekte, die ich nicht bedenke.