Ist eine leere href gültig?

179

Einer unserer Webentwickler verwendet das folgende HTML als Platzhalter für die Gestaltung einer Dropdown-Liste.

<a href="" class="arrow"></a>

Ist dieses Ankertag gültig?

Da es keinen href-Wert gibt, wird er in einigen unserer Link-Checker-Berichte als fehlerhaft angezeigt.

html href Matthew
quelle
10
Es funktioniert jedoch nicht im IE! Nun, es funktioniert im IE, aber mit einem völlig anderen Verhalten, entgegen der Spezifikation. Es ist also pro Spezifikation gültig, aber nicht in der Praxis: (((
ZhongYu
Der IE verlinkt auf das Verzeichnis über dem Dokument: stackoverflow.com/questions/7966791/…
Nate
1
Ja, eine leere href in älteren Versionen von IE (7/8 usw.) kann schlimme Folgen haben, z. B. eine Verzeichnisliste. Es ist viel zu diesem Thema dokumentiert, wenn Sie es googeln
Ringo
Zum Beispiel: gtmetrix.com/avoid-empty-src-or-href.html . Egal, nur alte Browser, es betrifft aktuelle IE-, Edge- und auch Webkit-Browser.
Ringo

Antworten:

60

Obwohl diese Frage bereits beantwortet wurde ( tl; dr: yes, ein leerer hrefWert ist gültig), verweist keine der vorhandenen Antworten auf die relevanten Spezifikationen.

Eine leere Zeichenfolge kann keine URI sein. Das hrefAttribut verwendet jedoch nicht nur URIs als Wert, sondern auch URI-Referenzen. Eine leere Zeichenfolge kann eine URI-Referenz sein.

HTML 4.01

HTML 4.01 verwendet RFC 2396 , wie in Abschnitt 4.2 angegeben. Referenzen im selben Dokument (fett hervorgehoben):

Eine URI-Referenz, die keine URI enthält, ist eine Referenz auf das aktuelle Dokument. Mit anderen Worten, eine leere URI-Referenz innerhalb eines Dokuments wird als Referenz auf den Anfang dieses Dokuments interpretiert , und eine Referenz, die nur eine Fragmentkennung enthält, ist eine Referenz auf das identifizierte Fragment dieses Dokuments.

RFC 2396 wird durch RFC 3986 (der derzeit der URI-Standard der IETF ist) überholt , der im Wesentlichen dasselbe sagt .

HTML5

HTML5 verwendet ( gültige URL möglicherweise von Leerzeichen umgeben → gültige URL ) die URL-Spezifikation von W3C , die eingestellt wurde. Stattdessen sollte der URL-Standard von WHATWG verwendet werden (siehe letzter Abschnitt).

HTML 5.1

HTML 5.1 verwendet ( gültige URL möglicherweise von Leerzeichen umgeben → gültige URL ) den URL-Standard von WHATWG (siehe nächster Abschnitt).

WHATWG HTML

Der HTML-Code von WHATWG verwendet ( gültige URL, die möglicherweise von Leerzeichen umgeben ist ) die Definition einer gültigen URL-Zeichenfolge aus dem URL-Standard von WHATWG , in der angegeben wird, dass es sich um eine relative URL mit Fragmentzeichenfolge handeln kann , die mindestens eine relative URL-Zeichenfolge sein muss. Dies kann eine Pfad-relative-Schema-weniger-URL-Zeichenfolge sein . Dies ist eine Pfad-relative-URL-Zeichenfolge , die nicht mit einer Schema-Zeichenfolge beginnt, gefolgt von :ihrer Definition (fett hervorgehoben).

Eine pfadrelative URL-Zeichenfolge muss aus null oder mehr URL-Pfadsegmentzeichenfolgen bestehen, die durch U + 002F (/) voneinander getrennt sind und nicht mit U + 002F (/) beginnen dürfen.

unor
quelle
184

Es ist gültig.

Es ist jedoch üblich, href="#"oder manchmal zu verwenden href="javascript:;".

SLaks
quelle
23
Wie in RFC 2396 angegeben: Eine URI-Referenz, die keine URI enthält, ist eine Referenz auf das aktuelle Dokument. Mit anderen Worten, eine leere URI-Referenz innerhalb eines Dokuments wird als Referenz auf den Anfang dieses Dokuments interpretiert
Oktober
32
Wenn ich klicke href="#", wird der Fokus im IE an den oberen Rand der Seite verschoben, sodass ich denke, dass href="javascript:;"es besser ist
Deckard
32
href = "#" ist ein Anti-Pattern. Es fügt dem Browserverlauf einen zusätzlichen Eintrag hinzu und lässt den Browser in einigen Fällen nach oben scrollen. Sie können das href-Attribut einfach weglassen, wenn Sie es nicht verwenden. Es wird standardmäßig "" verwendet und daher die Seite neu geladen, wenn dies nicht verhindert wird.
tosh
16
@tosh, nein, ich bin mir ziemlich sicher, wenn Sie das href-Attribut weglassen, wird das <a> -Element nicht als Link gestaltet, ist nicht fokussierbar und erstellt keinen Link als <a href = "" > oder <a href>. Wenn es für Sie funktioniert, können Sie eine JSFiddle freigeben, die es zeigt?
Gui Prá
6
@tosh, weißt du was lustig ist? Anscheinend sollte das Weglassen des Attributs seit HTML5 so funktionieren, siehe w3.org/TR/html5/text-level-semantics.html#the-a-element (Vielen Dank, halfdan, dass Sie diese Antwort unten eingereicht haben.) Anscheinend war dies nicht der Fall Von Anbietern noch implementiert, und da es sich immer noch nur um Empfehlungen von Kandidaten handelt, ist es schwer zu sagen, ob es im endgültigen Standard beibehalten wird oder ob Anbieter dies zuvor tun werden.
Gui Prá
115

Wie andere gesagt haben, ist es gültig.

Jeder Ansatz hat jedoch einige Nachteile:

href="#" Fügt dem Browserverlauf einen zusätzlichen Eintrag hinzu (was beim Zurückschalten ärgerlich ist).

href="" lädt die Seite neu

href="javascript:;" scheint keine Probleme zu haben (außer unordentlich und bedeutungslos auszusehen) - kennt jemand welche?

UpTheCreek
quelle
22
Ein weiteres interessantes ist href = "//: 0", das weder eine Anfrage an den Server stellt noch einen Verlauf hinterlässt.
diachedelisch
2
Mit //: 0 können einige meiner Bilder nicht in Chrome geladen werden. Chrome interpretiert dies anscheinend als Empfang eines Abbruchbefehls.
David Grenier
5
href: "Javascript:;" war genau das, was ich brauchte, um Dinge in beiden Android- und iOS-Webviews zum
Laufen zu
2
IE Links zu dem Verzeichnis über dem Dokument: stackoverflow.com/questions/7966791/…
Nate
1
Ich habe dies nicht getestet, aber ich vermute, dass href = "javascript:;" würde gegen die Inhaltssicherheitsrichtlinie verstoßen, die Inline-JavaScript nicht zulässt. Wenn Sie diese Richtlinie aktivieren möchten, würde ich eine der Alternativen verwenden.
Mark Good
60

Während es möglicherweise vollständig gültiges HTML ist, kein href zu enthalten, insbesondere mit einem Onclick-Handler, sind einige Dinge zu beachten: Es kann nicht auf die Tastatur fokussiert werden, ohne dass ein Tabindex-Wert festgelegt ist. Darüber hinaus kann Screenreader-Software mit Internet Explorer nicht darauf zugreifen, da der IE über die Eingabehilfen-Schnittstellen meldet, dass jedes Ankerelement ohne href-Attribut nicht fokussierbar ist, unabhängig davon, ob der Tabindex festgelegt wurde.

Während also Folgendes vollständig gültig sein kann:

<a class="arrow">Link content</a>

Es ist weitaus besser, explizit ein href-Attribut mit Null-Effekt hinzuzufügen

<a href="javascript:void(0);" class="arrow">Link content</a>

Um die volle Unterstützung aller Benutzer zu erhalten, sollten Sie, wenn Sie die Klasse mit CSS zum Rendern eines Bildes verwenden, auch Textinhalte einfügen, z. B. das title-Attribut, um eine Textbeschreibung der Vorgänge bereitzustellen.

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>
Nick
quelle
1
Vielen Dank für die Erwähnung, dass das Weglassen hrefdie Eingabehilfen beeinträchtigt.
Daniel Sokolowski
1
Ich würde auch hinzufügen - aus Sicht der Barrierefreiheit -, dass das Festlegen des hrefWerts auf etwas anderes als einen relativen / absoluten Pfad Probleme mit dem Bildschirmleser verursacht. Vermeiden Sie die Verwendung eines Hash / Pound-Symbols als Problemumgehung für dieses Problem, da es nicht dafür gedacht ist. Bildschirmleser können (derzeit VoiceOver) Ihren Link als Fragment-ID (Link zu einer Stelle auf der aktuellen Seite ) ankündigen und sind auch unter Standardgesichtspunkten gültig. siehe w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash
Michel Hébert
27

Der aktuelle HTML5-Entwurf ermöglicht auch das vollständige Auslassen des href-Attributs.

Wenn das a-Element kein href-Attribut hat, stellt das Element einen Platzhalter dar, an dem andernfalls ein Link platziert worden wäre, wenn er relevant gewesen wäre.

Um Ihre Frage zu beantworten: Ja, es ist gültig.

Halfdan
quelle
6
Ja, ABER - ein <a>Element mit Nein hrefwird in einigen Browsern direkt gestaltet. Zum Beispiel funktionieren ": hover" -Stile nicht in Chrome (und anderen seltsamen Dingen)
Alex
Ein <a>Tag ohne ein steht hreffür etwas anderes , nicht für einen Link (traditionell ein Anker). Es gibt auch einen Unterschied zwischen einem optionalen Attribut und einem Attribut, das leer sein kann.
Kobi
19

In der Tat können Sie es leer lassen (W3-Validator beschwert sich nicht).

Gehen Sie noch einen Schritt weiter: Lassen Sie das = "" weg. Dies hat den Vorteil, dass der Link nicht als Anker für die aktuelle Seite behandelt wird.

<a href>sth</a>
Anroots
quelle
Obwohl: <a href></a>→ Attribut href ohne expliziten Wert gesehen. Das Attribut kann von IE7 gelöscht werden.
c24w
1
Ich mag diese Lösung auch. Kennen Sie andere Nachteile als das IE7-Verhalten?
rinat.io
Dies ist eine illegale Syntax. Gemäß der Spezifikation "Die Syntax [Leeres Attribut] ist nur für boolesche Attribute zulässig."
Robert Siemer
9

Während sich der Validator von W3 möglicherweise nicht über ein leeres hrefAttribut beschwert , gibt der aktuelle HTML5-Arbeitsentwurf Folgendes an:

Das hrefAttribut on aund areaelements muss einen Wert haben, der eine gültige URL ist, die möglicherweise von Leerzeichen umgeben ist.

Eine gültige URL ist eine URL, die dem URL-Standard entspricht . Jetzt ist der URL-Standard etwas verwirrend, um sich zurechtzufinden. Nirgendwo heißt es jedoch, dass eine URL eine leere Zeichenfolge sein kann.

... was bedeutet, dass eine leere Zeichenfolge keine gültige URL ist.

Im HTML5-Arbeitsentwurf heißt es jedoch weiter:

Hinweis: Das hrefAttribut on aund areaelements ist nicht erforderlich . Wenn diese Elemente keine hrefAttribute haben, werden keine Hyperlinks erstellt.

Dies bedeutet, dass wir das hrefAttribut einfach ganz weglassen können :

<a class="arrow"></a>

Wenn Ihre Absicht ist , dass diese href-weniger aElemente noch Tastatur interraction benötigen sollten, werden Sie die normale Route von einer Zuordnung nach unten gehen müssen roleund tabindexneben Ihrem üblichen Klick / keydown Handler:

<a class="arrow" role="button" tab-index="0"></a>
James Donnelly
quelle
Tatsächlich. Wie Sie bereits zitiert haben, handelt es sich leider hrefnicht um einen Hyperlink, wodurch die onclickFunktionalität für Tastaturbenutzer unzugänglich wird.
aij
7

Ein Wort der Vorsicht:

Nach meiner Erfahrung führt das Weglassen des hrefAttributs zu Problemen bei der Barrierefreiheit, da die Tastaturnavigation es ignoriert und es niemals so fokussiert, wie es der Fall ist, wenn href vorhanden ist. Das manuelle Einfügen Ihres Elements in den Tabindex ist ein Weg, um dies zu umgehen.

Jason
quelle
3

Es ist gültig, aber wie UpTheCreek sagte: "Jeder Ansatz hat einige Nachteile."

Wenn Sie Ajax über ein Tag aufrufen, lassen Sie das href = "" wie folgt, damit die Seite neu geladen wird und der Ajax-Code niemals aufgerufen wird ...

Ich habe gerade diesen Gedanken bekommen, wäre gut zu teilen

Ray Tsai
quelle
2

Versuchen Sie es <a href="#" class="arrow">stattdessen. (Beachten Sie das scharfe #Zeichen).

Elvenbyte
quelle