Apakah href kosong valid?


179

Salah satu pengembang web kami menggunakan html berikut sebagai pengganti penataan daftar tarik turun.

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

Apakah tag jangkar ini dianggap valid?

Karena tidak ada nilai href, itu muncul sebagai rusak pada beberapa laporan pemeriksa tautan kami.


10
Itu tidak bekerja di IE sekalipun! Yah itu bekerja di IE tetapi dengan perilaku yang sama sekali berbeda, melawan spesifikasi. Jadi itu valid per spec, tetapi tidak dalam praktiknya: (((
ZhongYu

Memperluas apa yang dikatakan bayou.io, IE menautkan ke direktori di atas dokumen: stackoverflow.com/questions/7966791/…
Nate

1
Ya, href kosong di versi IE yang lebih lama (7/8, dll.) Dapat memiliki konsekuensi buruk, seperti daftar direktori. Ada banyak yang didokumentasikan pada subjek jika Anda google
Ringo

misalnya: gtmetrix.com/avoid-empty-src-or-href.html . Jangankan hanya browser lama, ini memengaruhi IE, Edge, dan juga browser Webkit saat ini.
Ringo

Jawaban:


60

Meskipun pertanyaan ini sudah dijawab ( tl; dr: ya, hrefnilai kosong valid), tidak ada jawaban yang ada yang merujuk spesifikasi yang relevan.

String kosong tidak boleh berupa URI. Namun, hrefatribut tidak hanya mengambil URI sebagai nilai, tetapi juga referensi URI. String kosong mungkin merupakan referensi URI.

HTML 4.01

HTML 4.01 menggunakan RFC 2396 , di mana dikatakan di bagian 4.2. Referensi dokumen yang sama (huruf tebal penekanan):

Referensi URI yang tidak mengandung URI adalah referensi ke dokumen saat ini. Dengan kata lain, referensi URI kosong dalam suatu dokumen ditafsirkan sebagai referensi ke awal dokumen itu , dan referensi yang hanya mengandung pengidentifikasi fragmen adalah referensi ke fragmen yang diidentifikasi dari dokumen itu.

RFC 2396 usang oleh RFC 3986 (yang saat ini merupakan standar URI IETF ), yang pada dasarnya mengatakan hal yang sama .

HTML5

Penggunaan HTML5 ( URL yang valid berpotensi dikelilingi oleh spasiURL yang valid ) Spesifikasi URL W3C , yang telah dihentikan. URL Standar WHATWG harus digunakan sebagai gantinya (lihat bagian terakhir).

HTML 5.1

Penggunaan HTML 5.1 ( URL yang valid berpotensi dikelilingi oleh spasiURL yang valid ) Standar URL WHATWG (lihat bagian berikutnya).

WHATWG HTML

HTML WHATWG menggunakan ( URL yang valid berpotensi dikelilingi oleh spasi ) definisi string URL yang valid dari WHATWG's URL Standard , di mana ia mengatakan bahwa itu bisa menjadi string relatif-URL-dengan-fragmen , yang setidaknya harus berupa string relatif-URL , yang dapat berupa string jalur-relatif-skema-kurang-URL , yang merupakan string jalur-relatif-URL yang tidak dimulai dengan string skema yang diikuti oleh :, dan definisinya mengatakan (tambang penekanan tebal):

String path-relative-URL harus nol atau lebih string segmen-URL-path, dipisahkan satu sama lain oleh U + 002F (/), dan tidak dimulai dengan U + 002F (/).


184

Itu sah.

Namun, praktik standar adalah menggunakan href="#"atau kadang-kadang href="javascript:;".


23
Sebagaimana dinyatakan dalam RFC 2396: Referensi URI yang tidak mengandung URI adalah referensi ke dokumen saat ini. Dengan kata lain, referensi URI kosong dalam dokumen ditafsirkan sebagai referensi ke awal dokumen itu,
Oktober

32
ketika saya mengklik href="#", fokus bergerak ke atas halaman di IE, jadi saya pikir href="javascript:;"lebih baik
Deckard

32
href = "#" adalah anti-pola. Ini menambahkan entri tambahan ke riwayat browser dan dalam beberapa kasus membuat browser gulir ke atas, Anda bisa meninggalkan atribut href jika Anda tidak menggunakannya. ini akan menjadi "" default dan karena itu memuat ulang halaman jika tidak dicegah.
tosh

16
@tosh, tidak, saya cukup yakin jika Anda meninggalkan atribut href, elemen <a> tidak ditata sebagai tautan, tidak dapat fokus, dan tidak membuat tautan sebagai <a href = "" > atau <a href> tidak. Jika berhasil, bisakah Anda membagikan JSFiddle yang menunjukkannya?
Gui Prá

6
@tosh, kamu tahu apa yang lucu? Rupanya sejak HTML5, menghilangkan atribut seharusnya berfungsi seperti itu, lihat w3.org/TR/html5/text-level-semantics.html#the-elelement (Terima kasih halfdan karena mengirimkan jawaban itu di bawah.) Rupanya ini belum belum diimplementasikan oleh vendor, dan karena itu masih hanya rekomendasi kandidat, sulit untuk mengatakan apakah itu akan disimpan dalam standar akhir atau apakah vendor akan mematuhi sebelum itu.
Gui Prá

115

Seperti yang orang lain katakan, itu valid.

Ada beberapa kerugian untuk setiap pendekatan:

href="#" menambahkan entri tambahan ke riwayat peramban (yang menjengkelkan ketika misalnya tombol kembali).

href="" memuat kembali halaman

href="javascript:;" tampaknya tidak memiliki masalah (selain terlihat berantakan dan tidak berarti) - ada yang tahu?


22
Yang menarik lainnya adalah href = "//: 0", yang tidak akan membuat permintaan ke server atau meninggalkan riwayat apa pun.
diachedelic

2
//: 0 membuat beberapa gambar saya gagal dimuat di Chrome. Tampaknya Chrome mengartikan itu sebagai menerima perintah pembatalan.
David Grenier

5
href: "javascript :;" adalah apa yang saya butuhkan untuk membuat hal-hal berfungsi di Android dan tampilan web iOS
dumazy

2
IE menautkan ke direktori di atas dokumen: stackoverflow.com/questions/7966791/…
Nate

1
Saya belum menguji ini, tetapi saya menduga bahwa href = "javascript:;" akan melanggar Kebijakan Keamanan Konten yang melarang inline JavaScript. Jika Anda bermaksud mengaktifkan kebijakan ini, saya akan menggunakan salah satu alternatif.
Mark Good

60

Meskipun mungkin HTML yang benar-benar valid untuk tidak menyertakan href, terutama dengan handler onclick, ada beberapa hal yang perlu dipertimbangkan: itu tidak akan fokus pada keyboard tanpa menetapkan nilai tabindex. Selain itu, ini tidak akan dapat diakses oleh perangkat lunak screenreader menggunakan Internet Explorer, karena IE akan melaporkan melalui antarmuka aksesibilitas bahwa setiap elemen jangkar tanpa atribut href sebagai tidak-fokus, terlepas dari apakah tabindex telah ditetapkan.

Jadi sementara yang berikut ini mungkin benar-benar valid:

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

Jauh lebih baik untuk menambahkan atribut href efek-nol secara eksplisit

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

Untuk dukungan penuh dari semua pengguna, jika Anda menggunakan kelas dengan CSS untuk membuat gambar, Anda juga harus memasukkan beberapa konten teks, seperti atribut judul untuk memberikan deskripsi teks tentang apa yang terjadi.

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

1
Terima kasih telah menyebutkan bahwa menghilangkan hrefakan mengacaukan dengan antarmuka aksesibilitas.
Daniel Sokolowski

1
Saya juga menambahkan - dari perspektif aksesibilitas - bahwa pengaturan hrefnilai ke hal lain selain jalur relatif / absolut akan menyebabkan masalah pembaca layar. Hindari menggunakan simbol hash / pound sebagai solusi untuk masalah ini karena tidak dimaksudkan untuk ini. Pembaca layar dapat (saat ini VoiceOver) mengumumkan tautan Anda untuk menjadi pengidentifikasi fragmen (tautan ke suatu tempat di halaman saat ini) dan juga valid dari sudut pandang standar. lihat w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash
Michel Hébert

27

Konsep HTML5 saat ini juga memungkinkan untuk menghilangkan atribut href sepenuhnya.

Jika elemen tidak memiliki atribut href, maka elemen tersebut mewakili pengganti untuk tempat tautan mungkin ditempatkan, jika itu relevan.

Untuk menjawab pertanyaan Anda: Ya itu valid.


6
ya, TETAPI - sebuah <a>elemen tanpa hrefgaya ditata dengan gaya di beberapa browser. Misalnya, gaya ": hover" tidak berfungsi di Chrome (dan hal-hal aneh lainnya)
Alex

Sebuah <a>tag tanpa hrefmewakili sesuatu yang lain , bukan link (tradisional jangkar). Juga, ada perbedaan antara atribut opsional dan atribut yang bisa kosong.
Kobi

19

Memang, Anda dapat membiarkannya kosong (validator W3 tidak mengeluh).

Mengambil ide satu langkah lebih jauh: tinggalkan = "". Keuntungan dari hal ini adalah bahwa tautan tersebut tidak diperlakukan sebagai jangkar ke halaman saat ini.

<a href>sth</a>

Meskipun: <a href></a>Atribut href tanpa nilai eksplisit terlihat. Atribut dapat dijatuhkan oleh IE7.
c24w

1
Saya suka solusi ini juga. Apakah Anda tahu ada kerugian lain kecuali perilaku IE7?
rinat.io

Ini adalah sintaksis ilegal. Menurut spec “Sintaks [Atribut Kosong] diizinkan hanya untuk atribut boolean.”
Robert Siemer

9

Sementara validator W3 mungkin tidak mengeluh tentang hrefatribut kosong , Draft Kerja HTML5 saat ini menentukan:

The hrefatribut pada adan areaelemen harus memiliki nilai yang URL yang valid berpotensi dikelilingi oleh spasi.

Sebuah URL yang valid adalah URL yang sesuai dengan Standar URL . Sekarang Standar URL agak membingungkan untuk diketahui, namun tidak menyatakan bahwa URL dapat berupa string kosong.

... yang berarti bahwa string kosong bukan URL yang valid.

Namun, Draf Kerja HTML5 menyatakan:

Catatan: The hrefatribut pada adan areaelemen tidak diperlukan ; ketika elemen-elemen itu tidak memiliki hrefatribut, mereka tidak membuat hyperlink.

Ini berarti kita bisa menghilangkan hrefatributnya sekaligus:

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

Jika niat Anda adalah bahwa elemen-elemen hreftanpa ini amasih harus memerlukan interaksi keyboard, Anda harus menempuh rute normal untuk menetapkan roledan di tabindexsamping penangan klik / keydown yang biasa:

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

Memang. Sayangnya, seperti yang Anda kutip, meninggalkan hrefmembuatnya bukan hyperlink, yang membuat onclickfungsionalitas tidak dapat diakses oleh pengguna keyboard.
aij

7

Sebuah kata peringatan:

Dalam pengalaman saya, menghilangkan hrefatribut menyebabkan masalah aksesibilitas karena navigasi keyboard akan mengabaikannya dan tidak pernah memberikannya fokus seperti ketika href ada. Memasukkan elemen Anda secara manual ke dalam tabindex adalah jalan keluarnya.


3

itu valid tetapi seperti UpTheCreek mengatakan 'Ada beberapa kerugian untuk setiap pendekatan'

jika Anda memanggil ajax melalui tag biarkan href = "" seperti ini akan membuat halaman reload dan kode ajax tidak akan pernah dipanggil ...

baru saja mendapat pemikiran ini akan baik untuk dibagikan


2

Coba lakukan <a href="#" class="arrow">sebagai gantinya. (Catat #karakter yang tajam ).

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.