webentwicklung-frage-antwort-db.com.de

Gültig, um <a> (Anchor-Tag) ohne href-Attribut zu verwenden?

Ich habe Twitter Bootstrap zum Erstellen einer Site verwendet, und ein Großteil der Funktionalität hängt davon ab, ob Dinge in <a> Eingeschlossen werden, auch wenn sie nur Javascript ausführen. Ich hatte Probleme mit der href="#" - Taktik, die in der Dokumentation von Bootstrap empfohlen wird, und habe versucht, eine andere Lösung zu finden.

Aber dann habe ich versucht, das href -Attribut ganz zu entfernen. Ich habe <a class='bunch of classes' data-whatever='data'> Verwendet und Javascript hat den Rest erledigt. Und es funktioniert.

Doch irgendetwas sagt mir, dass ich das nicht tun sollte. Recht? Ich meine, technisch gesehen sollte <a> Ein Link zu etwas sein, aber ich bin mir nicht ganz sicher warum das ist ein Problem. Oder ist es?

117
Zacqary

Das nchor-Element <a> Ist einfach ein Anker für oder von einem Inhalt. Ursprünglich war die HTML-Spezifikation für benannte Anker (<a name="foo">) Und verknüpfte Anker (<a href="#foo">) Zulässig.

Das benannte Ankerformat wird seltener verwendet, da der Fragmentbezeichner jetzt zum Angeben eines Attributs [id] Verwendet wird (aus Gründen der Abwärtskompatibilität können Sie jedoch immer noch Attribute [name] Angeben). Ein Element <a> Ohne Attribut [href] Ist weiterhin gültig .

In Bezug auf Semantik und Stil ist das Element <a> Kein Link (:link), Es sei denn, es verfügt über ein Attribut [href]. Ein Nebeneffekt davon ist, dass ein <a> - Element ohne [href] Standardmäßig nicht in der Tabulatorreihenfolge ist.

Die eigentliche Frage ist, ob das Element <a> Allein eine angemessene Darstellung eines <button> Ist. Auf semantischer Ebene gibt es einen deutlichen Unterschied zwischen einem link und einem button.

Eine Schaltfläche ist etwas, das beim Klicken eine Aktion auslöst.

Ein Link ist eine Schaltfläche, die eine Änderung der Navigation im aktuellen Dokument bewirkt. Die dabei auftretende Navigation kann bei Fragment-IDs (#foo) Innerhalb des Dokuments oder bei URLs (/bar) In ein neues Dokument verschoben werden.

Da Verknüpfungen eine besondere Art von Schaltflächen sind, wurden ihre Aktionen häufig außer Kraft gesetzt, um alternative Funktionen auszuführen. Die weitere Verwendung eines Ankers als Schaltfläche ist vom Standpunkt der Konsistenz aus in Ordnung, obwohl es semantisch nicht ganz korrekt ist.

Wenn Sie Bedenken hinsichtlich der Semantik und Zugänglichkeit der Verwendung eines Elements <a> (Oder <span> Oder <div>) Als Schaltfläche haben, sollten Sie die folgenden Attribute hinzufügen:

<a role="button" tabindex="0" ...>...</a>

Die Schaltflächenrolle teilt dem Benutzer mit, dass das bestimmte Element als Schaltfläche behandelt wird, um die Semantik des zugrunde liegenden Elements zu überschreiben.

Für die Elemente <span> Und <div> Möchten Sie möglicherweise JavaScript-Schlüssel-Listener für hinzufügen Space oder Enter um das Ereignis click auszulösen. Die Elemente <a href> Und <button> Tun dies standardmäßig, die Elemente, die keine Schaltflächen sind, jedoch nicht. Manchmal ist es sinnvoller, den Trigger click an einen anderen Schlüssel zu binden. Beispielsweise kann eine "Hilfe" -Schaltfläche in einer Webanwendung gebunden sein F1.

203
zzzzBov

Ich denke, Sie können Ihre Antwort hier finden: Ist ein Ankertag ohne das href-Attribut sicher?

Auch wenn Sie keine Verknüpfungsoperation mit href möchten, können Sie es wie folgt verwenden:

<a href="javascript:void(0);">something</a>
35
swati

Ja, es ist gültig das Anchor-Tag ohne das Attribut href zu verwenden.

Wenn das a - Element kein href - Attribut hat, stellt das Element einen Platzhalter dar, für den ein Link, der sonst relevant gewesen wäre, nur aus dem Inhalt des Elements bestehen könnte.

Ja, Sie können class und andere Attribute verwenden, aber Sie können nicht target, download, rel, hreflang ] und type.

Die Attribute target, download, rel, hreflang und type müssen weggelassen werden, wenn das Attribut href nicht vorhanden ist.

Zum Teil " Soll ich?" siehe die erste Angabe: " wo sonst ein Link hätte platziert werden können, wenn er relevant gewesen wäre". Also würde ich fragen " Wenn ich kein JavaScript hätte, würde ich dieses Tag als Link verwenden?". Wenn die Antwort Ja lautet, dann Ja, Sie sollten<a> Ohne href verwenden. Wenn nein, würde ich es trotzdem verwenden, da die Produktivität für mich wichtiger ist als die Edge-Case-Semantik, aber dies ist nur meine persönliche Meinung.

Zusätzlich solltest du aufpassen für verschiedene Verhalten und Styling (zB keine Unterstreichung, kein Zeiger-Cursor, kein :link) .

Quelle: W3C HTML5-Empfehlung

9
Tamás Bolvári

Es ist gültig. Sie können es zum Beispiel verwenden, um Modalitäten (oder ähnliche Dinge, die auf die Attribute data-toggle Und data-target Reagieren) anzuzeigen.

So etwas wie:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

In diesem Beispiel verwende ich das Symbol für beeindruckende Schriftarten, das besser als a -Tag als als button -Tag geeignet ist, um ein Modal anzuzeigen. Durch Setzen von role="button" Ändert sich der Zeiger in einen Aktionstyp. Ohne href oder role="button" Ändert sich der Cursor nicht.

4
vedant