Apakah tag jangkar tanpa atribut href aman?

232

Apakah boleh menggunakan tag jangkar tanpa menyertakan hrefatribut, dan sebagai gantinya menggunakan pengendali event klik JavaScript? Jadi saya akan menghilangkan hrefsepenuhnya, bahkan tidak memilikinya kosong ( href="").

html hyperlink standards anchor john
sumber
1
Acara onclick masih memicu? Saya ingin menggunakan tag jangkar daripada span / div karena ini adalah satu-satunya tag yang masuk akal yang mendukung CSS: hover di IE
john
3
@Martin ANCHORS dapat diakses dan diaktifkan melalui keyboard. Elemen SPAN reguler tidak bisa. Lihat di sini: jsfiddle.net/simevidas/4DTxv/2
Šime Vidas
3
@ ŠimeVidas, <span>elemen paling pasti dapat dinavigasi melalui keyboard . Anda juga bisa membuatnya sehingga <a>elemen tidak dapat dinavigasi melalui keyboard .
zzzzBov
2
Di HTML5, jangkar tanpa atribut href adalah hyperlink placeholder: dev.w3.org/html5/markup/a.html
Ignacio Lago
1
Apakah Anda yakin tidak menginginkan tombol? Ini berarti bahwa tabbing dll berfungsi, dan Anda dapat menata tombol Anda agar terlihat seperti tautan jika perlu. Memang saya tidak tahu tentang melayang di IE.
robbie_c

Jawaban:

217

Di HTML5, menggunakan aelemen tanpa hrefatribut valid. Itu dianggap sebagai "hyperlink placeholder."

Contoh:

<a>previous</a>

Cari "hyperlink placeholder" di halaman referensi tag anchor w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element .

Dan itu juga disebutkan di wiki di sini: https://www.w3.org/wiki/Elements/a

Tautan placeholder adalah untuk kasus-kasus di mana Anda ingin menggunakan elemen jangkar, tetapi tidak menavigasi ke mana pun. Ini berguna untuk menandai halaman saat ini di menu navigasi atau jejak remah roti. (Pendekatan lama seharusnya menggunakan tag rentang atau tag jangkar dengan kelas bernama "aktif" atau "saat ini" untuk menatanya dan JavaScript untuk membatalkan navigasi.)

Tautan placeholder juga berguna dalam kasus di mana Anda ingin menetapkan tujuan tautan secara dinamis melalui JavaScript saat runtime. Anda cukup mengatur nilai atribut href, dan tag anchor menjadi dapat diklik.

Lihat juga:

dthrasher
sumber
3
Apa definisi "tautan placeholder"?
Gyum Fox
14
Perhatikan bahwa tanpa hrefitu cursor: pointergaya tidak akan otomatis ditambahkan ke elemen.
Lukas
38

Tidak apa-apa, tetapi pada saat yang sama dapat menyebabkan beberapa browser menjadi lambat.

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

Saran saya adalah gunakan <a href="#"> </a>

Jika Anda menggunakan JQuery ingat juga untuk menggunakan:

.click(function(event){
    event.preventDefault();
    // Click code here...
});
Gunnar Hoffman
sumber
7
Saya tidak dapat menggunakan href = "#" karena saya menggunakan bookmark ajax yang melibatkan perubahan hash, apa yang bisa saya lakukan?
john
5
Alih-alih menggunakan javascript: void (0); di dalam href saya menggunakan javascript:; lebih pendek untuk menulis.
Ally
16
Penalti kinerja hanya berlaku jika Anda benar-benar menentukan atribut href kosong. Pertanyaannya menyatakan tidak ada atribut href sama sekali.
Pete B
18
Sebenarnya, menurut artikel (dan itu masuk akal) potensi penalti kinerja hanya berlaku untuk kosong atribut src . Itu tidak mengatakan apa-apa tentang kinerja-bijaksana tentang atribut href kosong.
bergie3000
1
Halo @ Kelinci, sepertinya tautannya sudah hilang sekarang. Apakah Anda memiliki referensi lain untuk klaim?
user31782
25

Jawaban singkat: Tidak.

Jawaban panjang:

Pertama, tanpa atribut href, itu tidak akan menjadi tautan. Jika itu bukan tautan maka itu tidak akan dapat diakses dengan keyboard (atau tombol napas, atau berbagai perangkat input lain yang tidak berbasis pointer) (kecuali jika Anda menggunakan fitur HTML 5 tabindexyang tidak didukung secara universal). Sangat jarang bahwa itu sesuai untuk kontrol untuk tidak memiliki akses keyboard.

Kedua. Anda harus memiliki alternatif ketika JavaScript tidak berjalan (karena lambat memuat dari server, koneksi Internet terputus (mis. Sinyal seluler di kereta bergerak), JS dimatikan, dll, dll.).

Menggunakan peningkatan progresif oleh JS yang tidak mencolok.

Quentin
sumber
Masalahnya adalah, saya ingin sesuatu yang saya bisa lampirkan acara klik dengan metode "klik" jQuery, yang juga disorot dan digarisbawahi seperti tautan saat mouse menggulirkannya. Apa lagi, selain tag anchor href-less yang dapat melakukannya tanpa CSS? (Yaitu apa adanya tanpa menambahkan interaksi dasar secara manual, sambil mempertahankan kesederhanaan tugas fungsi klik langsung melalui jQuery).
Triynko
@Triynko - Gunakan tautan, tetapi lakukan dengan benar. Lihat baris terakhir dari jawabannya.
Quentin
5
Tabindex pada tag 'a' telah berlaku sejak HTML4 (setidaknya) w3schools.com/tags/att_global_tabindex.asp
technoTarek
@ technoTarek - Ya, tetapi hrefwajib (kecuali jika itu adalah jangkar bernama dalam hal tabindex tidak masuk akal). Penggunaan tabindexuntuk menambahkan elemen yang tidak fokus ke urutan tab adalah inovasi baru dalam HTML 5.
Quentin
4
Ini salah. Apakah Anda mereferensikan spesifikasi HTML yang lebih lama pada saat itu, saya tidak bisa mengatakannya, tetapi menurut spesifikasi HTML5 itu memang sangat sah untuk memiliki atag tanpa hrefatribut.
michael
23

Jika Anda harus menggunakan href untuk kompabilitas mundur, Anda juga dapat menggunakan

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

alih-alih #, jika Anda tidak ingin menggunakan atribut

Rasive
sumber
1
Saya membutuhkan tag <a> yang berperilaku seperti tautan di semua fungsi kecuali. Ini berhasil bagi saya.
Jad S
13

Tag tersebut boleh digunakan tanpa atribut href. Berlawanan dengan banyak jawaban di sini, sebenarnya ada alasan standar untuk membuat jangkar ketika tidak ada href. Secara semantik, "a" berarti jangkar atau tautan. Jika Anda menggunakannya untuk sesuatu yang mengikuti makna itu, maka Anda baik-baik saja.

Salah satu standar penggunaan tag tanpa href adalah membuat tautan bernama. Ini memungkinkan Anda untuk menggunakan jangkar dengan nama = bla dan nanti Anda dapat membuat jangkar dengan href = # bla untuk menautkan ke bagian bernama dari halaman saat ini. Namun, ini sudah usang karena Anda juga dapat menggunakan ID dengan cara yang sama. Sebagai contoh, Anda bisa menggunakan tag tajuk dengan id = tajuk dan nantinya Anda bisa memiliki jangkar yang menunjuk ke href = # tajuk.

Maksud saya, bagaimanapun, bukan untuk menyarankan menggunakan properti nama. Hanya untuk menyediakan satu kasus penggunaan di mana Anda tidak memerlukan href, dan karena itu alasan mengapa tidak diperlukan.

monokrom
sumber
2
Saya pikir apa pertanyaan yang coba diajukan dan apa jawaban lainnya, adalah apakah aman untuk menghilangkan hrefatribut untuk <a>elemen yang digunakan sebagai elemen interaktif (yaitu tautan). Seperti yang Anda sebutkan, tanpa hrefatribut itu cukup sederhana ... bukan tautan, hanya jangkar, yang merupakan hal yang berbeda sama sekali.
BoltClock
1
Yap, tetapi - hanya untuk menekankan - tag <a> masih valid dalam kasus penggunaan ini.
monokrom
9

Dari perspektif aksesibilitas <a>tanpa href tidak dapat-tab, semua tautan harus bisa-tab jadi tambahkan tabindex = '0 "jika Anda tidak memiliki href.

pengguna3862605
sumber
1
Atau gunakan tombol jika akan melakukan tindakan dalam halaman alih-alih pengalihan.
SimonDever
8

The <a>tag tanpa "href" dapat berguna ketika menggunakan menu multi-level dan Anda perlu untuk memperluas tingkat berikutnya tetapi tidak ingin bahwa label menu untuk menjadi link aktif. Saya tidak pernah memiliki masalah menggunakannya dengan cara itu.

Jon
sumber
1
Sudahkah Anda mencoba mengakses menu itu dengan keyboard?
aij
Saya baru tahu bahwa di IE, jika Anda mengarahkan kursor ke beberapa tautan dan satu adalah jangkar tanpa href, sembulan kecil dengan URL di bawah tetap ada, menampilkan url sebelumnya, bukannya menghilang. Jangkar tidak diklik, jadi itu bukan masalah besar, tapi cukup bagi saya untuk pergi dengan div sebagai gantinya.
Andrew
1

Di beberapa browser Anda akan menghadapi masalah jika Anda tidak memberikan atribut href. Saya sarankan Anda untuk menulis kode Anda seperti ini:

<a href="#" onclick="yourcode();return false;">Link</a>

Anda dapat mengganti kode Anda () dengan fungsi atau logika Anda sendiri, tetapi jangan lupa untuk menambahkan return false; pernyataan di akhir.

shashwat13
sumber
Saya menggunakan Backbone.js dengan Backbone.Router dan miliki #untuk halaman indeks. Untuk beberapa tautan navbar saya, saya tidak ingin memicu rute ke #mana yang terjadi jika Anda menggunakannya a href="#"dengan sendirinya. Menggunakan <a href="#" onclick="return false;"menghentikan rute yang dipicu tetapi acara klik masih menggelembung ke handler saya (yang menggunakan acara DOM terhubung melalui jQuery dan Backbone.Radio). Terima kasih @ shashwat13 :)
David Williamson