Czy pusty href jest ważny?


179

Jeden z naszych programistów stron internetowych używa następującego kodu HTML jako symbolu zastępczego do stylizowania listy rozwijanej.

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

Czy ten uważany tag zakotwiczenia jest prawidłowy?

Ponieważ nie ma wartości href, w niektórych naszych raportach sprawdzania linków jest ona uszkodzona.


10
Jednak to nie działa w IE! Cóż, działa w IE, ale z zupełnie innym zachowaniem, w przeciwieństwie do specyfikacji. Jest to ważne dla specyfikacji, ale nie w praktyce: (((
ZhongYu

Rozwijając to, co powiedział bayou.io, IE prowadzi do katalogu nad dokumentem: stackoverflow.com/questions/7966791/…
Nate

1
Tak, pusty href w starszych wersjach IE (7/8 itd.) Może mieć złe konsekwencje, takie jak lista katalogów. Jest wiele udokumentowanych na ten temat, jeśli google go
Ringo

na przykład: gtmetrix.com/avoid-empty-src-or-href.html . Nie wspominając o starych przeglądarkach, wpływa to na bieżące przeglądarki IE, Edge, a także Webkit.
Ringo,

Odpowiedzi:


60

Chociaż na to pytanie już udzielono odpowiedzi ( tl; dr: tak, pusta hrefwartość jest poprawna), żadna z istniejących odpowiedzi nie odwołuje się do odpowiednich specyfikacji.

Pusty ciąg nie może być identyfikatorem URI. Jednak hrefatrybut nie tylko przyjmuje wartości URI, ale także odwołania do identyfikatorów URI. Pusty ciąg może być referencją URI.

HTML 4.01

HTML 4.01 używa RFC 2396 , o czym mówi sekcja 4.2. Odniesienia do tego samego dokumentu (moje pogrubienie):

Odwołanie URI, które nie zawiera URI, jest odniesieniem do bieżącego dokumentu. Innymi słowy, puste odniesienie URI w dokumencie jest interpretowane jako odniesienie do początku tego dokumentu , a odwołanie zawierające tylko identyfikator fragmentu jest odniesieniem do zidentyfikowanego fragmentu tego dokumentu.

RFC 2396 jest przestarzały przez RFC 3986 (który jest obecnie standardem URI IETF ), który zasadniczo mówi to samo .

HTML5

Używa HTML5 ( prawidłowy adres URL potencjalnie otoczony spacjamiprawidłowy adres URL ) Specyfikacja URL W3C , która została wycofana. Zamiast tego należy użyć standardu URL WHATWG (patrz ostatnia sekcja).

HTML 5.1

HTML 5.1 używa ( prawidłowy adres URL potencjalnie otoczony spacjamiprawidłowy adres URL ) Standardowy adres URL WHATWG (patrz następna sekcja).

WHATWG HTML

WHATWG w HTML używa ( prawidłowego adresu URL potencjalnie otoczonego spacjami ) definicji prawidłowego ciągu URL ze standardu URL WHATWG , gdzie mówi, że może to być ciąg względnego adresu URL z fragmentem , który musi być przynajmniej ciągiem względnego adresu URL , który może być łańcuchem URL-ścieżki-względnej-schematu-mniejszym , który jest łańcuchem URL- ścieżki-względnej , który nie zaczyna się od łańcucha schematu, po którym następuje :, a jego definicja mówi (pogrubienie moje):

Łańcuch względnego adresu URL musi być zerowy lub więcej ciągów segmentu ścieżki URL, oddzielonych od siebie U + 002F (/) i nie może zaczynać się od U + 002F (/).


184

Jest ważny.

Jednak standardową praktyką jest stosowanie href="#"lub czasem href="javascript:;".


23
Jak podano w RFC 2396: Odwołanie URI, które nie zawiera URI, jest odniesieniem do bieżącego dokumentu. Innymi słowy, puste odniesienie URI w dokumencie jest interpretowane jako odniesienie do początku tego dokumentu,
Paź

32
kiedy klikam href="#", fokus przenosi się na górę strony w IE, więc myślę, że href="javascript:;"jest lepszy
Deckard

32
href = "#" to anty-wzór. Dodaje dodatkowy wpis do historii przeglądarki, aw niektórych przypadkach powoduje przewijanie przeglądarki do góry, możesz po prostu pominąć atrybut href, jeśli go nie używasz. domyślnie będzie to „” i dlatego przeładuje stronę, jeśli nie zostanie zablokowane.
tosh

16
@tosh, nie, jestem pewien, że jeśli pominiesz atrybut href, element <a> nie jest stylowany jako łącze, nie można go ustawić i nie tworzy linku jako <a href = "" > lub <a href> robi. Jeśli to działa, czy możesz udostępnić JSFiddle, który to pokazuje?
Gui Prá,

6
@tosh, wiesz co jest śmieszne? Najwyraźniej od HTML5 pominięcie atrybutu powinno działać w ten sposób, patrz w3.org/TR/html5/text-level-semantics.html#the-a-element (Dziękujemy Halfdan za przesłanie tej odpowiedzi poniżej.) Najwyraźniej tak nie było wdrożonych jeszcze przez dostawców, a ponieważ jest to tylko rekomendacja kandydata, trudno jest stwierdzić, czy zostanie zachowana w ostatecznym standardzie, czy też dostawcy będą się przed nią stosować.
Gui Prá,

115

Jak powiedzieli inni, jest to ważne.

Każde podejście ma jednak kilka wad:

href="#" dodaje dodatkowy wpis do historii przeglądarki (co jest irytujące, np. przy przyciskowaniu wstecznym).

href="" ponownie ładuje stronę

href="javascript:;" nie wydaje się mieć żadnych problemów (poza wyglądaniem niechlujnie i bez znaczenia) - ktoś o nich wie?


22
Innym interesującym jest href = "//: 0", który nie wysyła żądania do serwera ani nie pozostawia historii.
diachedelic

2
//: 0 powoduje, że niektóre moje obrazy nie ładują się w Chrome. Wygląda na to, że Chrome interpretuje to jako polecenie anulowania.
David Grenier,

5
href: "javascript :;" było właśnie tym, czego potrzebowałem, aby rzeczy działały zarówno na Androidzie, jak i na stronach internetowych iOS
dumny

2
IE prowadzi do katalogu nad dokumentem: stackoverflow.com/questions/7966791/…
Nate

1
Nie testowałem tego, ale podejrzewam, że href = "javascript :;" naruszyłoby Politykę bezpieczeństwa treści, która nie zezwala na wbudowany JavaScript. Jeśli zamierzasz włączyć tę politykę, skorzystałbym z jednej z alternatyw.
Mark Good

60

Chociaż HTML może nie zawierać hrefu, szczególnie w przypadku programu obsługi onclick, należy jednak wziąć pod uwagę kilka kwestii: nie będzie można go ustawić za pomocą klawiatury bez ustawienia wartości tabindex. Ponadto będzie to niedostępne dla oprogramowania do odczytu ekranu za pomocą przeglądarki Internet Explorer, ponieważ IE zgłosi za pośrednictwem interfejsów ułatwień dostępu, że jakikolwiek element kotwiczący bez atrybutu href nie może być ustawiany, niezależnie od tego, czy został ustawiony tabindex.

Tak więc, podczas gdy poniższe mogą być całkowicie poprawne:

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

O wiele lepiej jest jawnie dodać atrybut href o zerowym efekcie

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

Aby uzyskać pełne wsparcie wszystkich użytkowników, jeśli używasz klasy z CSS do renderowania obrazu, powinieneś również dołączyć treść tekstową, na przykład atrybut title, aby przedstawić tekstowy opis tego, co się dzieje.

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

1
Dziękujemy za wspomnienie, że pominięcie hrefspowoduje bałagan w interfejsach ułatwień dostępu.
Daniel Sokołowski

1
Dodałbym także - z punktu widzenia dostępności - że ustawienie hrefwartości na cokolwiek innego niż ścieżkę względną / bezwzględną spowoduje problemy z czytnikiem ekranu. Unikaj używania symbolu skrótu / funta jako obejścia tego problemu, ponieważ nie jest on przeznaczony do tego. Czytniki ekranu mogą (obecnie VoiceOver) ogłaszać, że twój link jest identyfikatorem fragmentu (link do gdzieś na bieżącej stronie) i jest również ważny ze standardowego punktu widzenia. patrz w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash
Michel Hébert

27

Obecna wersja robocza HTML5 pozwala również całkowicie pominąć atrybut href.

Jeśli element nie ma atrybutu href, wówczas element reprezentuje symbol zastępczy, w którym można by umieścić link, gdyby był odpowiedni.

Aby odpowiedzieć na twoje pytanie: Tak, jest ważne.


6
tak, ALE - <a>element bez hrefjest stylowo stylizowany w niektórych przeglądarkach. Na przykład style „: hover” nie działają w Chrome (i innych dziwnych rzeczach)
Alex

<a>Tag bez hrefreprezentuje coś innego , a nie związek (tradycyjnie kotwicy). Istnieje również różnica między atrybutem opcjonalnym a atrybutem, który może być pusty.
Kobi,

19

Rzeczywiście, możesz zostawić to puste (weryfikator W3 nie narzeka).

Idąc dalej o krok dalej: pomiń = "". Zaletą tego jest to, że link nie jest traktowany jako kotwica do bieżącej strony.

<a href>sth</a>

Chociaż: <a href></a>Atrybut href bez widocznej wyraźnej wartości. Atrybut może zostać usunięty przez IE7.
c24w

1
Lubię to rozwiązanie. Czy znasz inne wady oprócz zachowania IE7?
rinat.io

To jest nielegalna składnia. Zgodnie ze specyfikacją „[Pusty atrybut] składnia jest dozwolona tylko dla atrybutów boolowskich.”
Robert Siemer

9

Podczas gdy walidator W3 może nie narzekać na pusty hrefatrybut, aktualny projekt roboczy HTML5 określa:

hrefAtrybut ai areaelementów musi mieć wartość, która jest prawidłowy adres URL potencjalnie otoczony spacjami.

Prawidłowy adres URL jest adresem URL, który jest zgodny z URL Standardu . Teraz Standard URL jest nieco mylący, jeśli chodzi o poruszanie się, jednak nigdzie nie jest powiedziane, że URL może być pustym ciągiem.

... co oznacza, że ​​pusty ciąg nie jest prawidłowym adresem URL.

Projekt roboczy HTML5 dalej jednak stwierdza:

Uwaga: atrybut i elementów nie jest wymagana ; gdy te elementy nie mają atrybutów, nie tworzą hiperłączy.hrefaareahref

Oznacza to, że możemy po prostu hrefcałkowicie pominąć atrybut:

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

Jeśli masz zamiar, aby te hrefbezbłędne aelementy nadal wymagały interakcji z klawiaturą, musisz pójść normalną drogą przypisywania rolea tabindexobok swoich zwykłych programów obsługi kliknięć / klawiszy:

<a class="arrow" role="button" tab-index="0"></a>

W rzeczy samej. Niestety, jak zacytowałeś, pominięcie tego hrefpowoduje, że nie jest to hiperłącze, co czyni tę onclickfunkcjonalność niedostępną dla użytkowników klawiatury.
aij

7

Słowo ostrzeżenia:

Z mojego doświadczenia hrefwynika, że pominięcie atrybutu powoduje problemy z dostępnością, ponieważ nawigacja za pomocą klawiatury go zignoruje i nigdy nie będzie koncentrować się tak, jak w przypadku obecności href. Ręczne włączenie twojego elementu w tabindex jest rozwiązaniem tego.


3

jest ważny, ale jak powiedział UpTheCreek: „Każde podejście ma kilka wad”

jeśli wywołujesz ajax za pomocą tagu, zostaw href = "" w ten sposób spowoduje to ponowne załadowanie strony, a kod ajax nigdy nie zostanie wywołany ...

właśnie dostałem tę myśl, którą warto podzielić się


2

Spróbuj zrobić <a href="#" class="arrow">zamiast tego. (Zwróć uwagę na ostry #znak).

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.