Gültig für die Verwendung von <a> (Ankertag) ohne href-Attribut?

Ich habe Twitter Bootstrap verwendet, um eine Website zu erstellen, und ein Großteil der Funktionalität hängt davon ab <a>, ob Dinge eingewickelt 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 daher versucht, eine andere Lösung zu finden.

Aber dann habe ich versucht, das hrefAttribut ganz zu entfernen . Ich habe <a class='bunch of classes' data-whatever='data'>Javascript verwendet und den Rest erledigen lassen. Und es funktioniert.

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

Das <a>nchor-Element ist einfach ein Anker für oder von einem Inhalt. Ursprünglich erlaubte die HTML-Spezifikation benannte Anker ( <a name="foo">) und verknüpfte Anker ( <a href="#foo">).

Das benannte Ankerformat wird seltener verwendet, da die Fragmentkennung jetzt zum Angeben eines [id]Attributs verwendet wird (obwohl Sie aus Gründen der Abwärtskompatibilität weiterhin [name]Attribute angeben können ). Ein <a>Element ohne [href]Attribut ist weiterhin gültig .

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

Die eigentliche Frage ist, ob das <a>Element allein eine angemessene Darstellung von a ist <button>. Auf semantischer Ebene gibt es einen deutlichen Unterschied zwischen a linkund a button.

Eine Schaltfläche bewirkt beim Klicken eine Aktion.

Ein Link ist eine Schaltfläche, die eine Änderung der Navigation im aktuellen Dokument bewirkt. Die auftretende Navigation kann sich bei Fragmentkennungen ( #foo) innerhalb des Dokuments oder bei URLs ( /bar) in ein neues Dokument bewegen .

Da Links eine spezielle Art von Schaltfläche sind, wurden ihre Aktionen häufig überschrieben, um alternative Funktionen auszuführen. Die weitere Verwendung eines Ankers als Schaltfläche ist vom Standpunkt der Konsistenz aus in Ordnung, obwohl sie semantisch nicht ganz genau ist.

Wenn Sie sich Gedanken über die Semantik und Zugänglichkeit der Verwendung eines <a>Elements (oder <span>oder oder <div>) als Schaltfläche machen, 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 Überschreibung für die Semantik des zugrunde liegenden Elements als Schaltfläche behandelt wird.

Für <span>und <div>Elemente möchten Sie möglicherweise JavaScript-Schlüssel-Listener für das Ereignis hinzufügen Spaceoder Enteres auslösen click. <a href>und <button>Elemente tun dies standardmäßig, Elemente ohne Schaltflächen jedoch nicht. Manchmal ist es sinnvoller, den clickAuslöser an eine andere Taste zu binden . Beispielsweise kann eine "Hilfe" -Schaltfläche in einer Web-App gebunden sein F1.

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

Auch wenn Sie keine Verknüpfung mit href durchführen möchten, können Sie diese wie folgt verwenden:

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

Ja, es ist gültig , das Ankertag ohne hrefAttribut zu verwenden.

Wenn das aElement kein hrefAttribut hat, stellt das Element einen Platzhalter dar, für den andernfalls ein Link platziert worden wäre, wenn er relevant gewesen wäre, der nur aus dem Inhalt des Elements besteht.

Ja, können Sie classund andere Attribute, aber sie können nicht target, download, rel, hreflang, undtype .

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

Bezüglich des Teils " Soll ich? " Siehe das erste Zitat: " Wo sonst ein Link platziert worden wäre, 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 ist, dann ja, dann sollten Sie nutzen , <a>ohne href. Wenn nein, würde ich es trotzdem verwenden, da Produktivität für mich wichtiger ist als die Randfall-Semantik, aber dies ist nur meine persönliche Meinung.

Darüber hinaus sollten Sie aufpassen, für unterschiedliche Verhalten und Styling (zB keine Unterstreichungs, kein Zeiger Cursor, keine :link).

Quelle: W3C HTML5-Empfehlung

Es ist gültig. Sie können es beispielsweise verwenden, um Modalitäten (oder ähnliche Dinge, die auf data-toggleund data-targetAttribute reagieren ) anzuzeigen .

Etwas wie:

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

Hier verwende ich das font-awesome-Symbol, das besser als aTag als als Tag geeignet ist button, um ein Modal anzuzeigen. Durch die Einstellung role="button"wird der Zeiger auch in einen Aktionstyp geändert. Ohne entweder hrefoder role="button"ändert sich der Cursorzeiger nicht.