Apa itu href = "#" dan mengapa digunakan?


363

Di banyak situs web saya melihat tautan yang dimiliki href="#". Apa artinya? Untuk apa ini digunakan?

Jawaban:


345

Tentang hyperlink:

Penggunaan utama tag jangkar - <a></a>- adalah sebagai hyperlink . Itu pada dasarnya berarti mereka membawa Anda ke suatu tempat. Hyperlink memerlukan hrefproperti, karena menentukan lokasi.

Hash:

Hash - di #dalam hyperlink menentukan id elemen html di mana jendela harus digulir.

href="#some-id"akan menggulir ke elemen di halaman saat ini seperti <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"akan pergi ke site.comdan gulir ke id di halaman itu.

Gulir ke Atas:

href="#"tidak menentukan nama id, tetapi memiliki lokasi yang sesuai - bagian atas halaman. Mengklik jangkar dengan href="#"akan memindahkan posisi gulir ke atas.

Lihat demo ini.

Ini adalah perilaku yang diharapkan menurut dokumentasi w3.

Placeholder Hyperlink:

Contoh di mana tempat penampung hyperlink masuk akal berada dalam pratinjau templat. Pada demo satu halaman untuk templat, saya sering melihat <a href="#">sehingga tag anchor adalah hyperlink, tetapi tidak ke mana-mana. Mengapa tidak membiarkan hrefproperti itu kosong? hrefProperti kosong sebenarnya adalah hyperlink ke halaman saat ini. Dengan kata lain, itu akan menyebabkan penyegaran halaman. Seperti yang saya bahas, href="#"juga merupakan hyperlink, dan menyebabkan scrolling. Oleh karena itu, solusi terbaik untuk placeholder hyperlink sebenarnya href="#!". Ide di sini adalah semoga tidak ada elemen pada halaman dengan id="!"(siapa yang melakukan itu !?) dan karena itu hyperlink tidak merujuk pada apa pun - jadi tidak ada yang terjadi.

Tentang tag jangkar:

Pertanyaan lain yang Anda mungkin bertanya-tanya adalah, "Mengapa tidak tinggalkan saja properti href?". Respons umum yang saya dengar adalah bahwa hrefproperti diperlukan, jadi "harus" ada di jangkar. Ini salah! The hrefproperti diperlukan hanya untuk jangkar untuk benar-benar menjadi hyperlink! Baca ini dari w3. Jadi, mengapa tidak tinggalkan saja untuk penampung? Browser merender gaya default untuk elemen dan akan mengubah gaya default tag anchor yang tidak memiliki properti href. Sebaliknya, itu akan dianggap seperti teks biasa. Bahkan mengubah perilaku browser mengenai elemen. Bilah status (bagian bawah layar) tidak akan ditampilkan ketika melayang di atas jangkar tanpa properti href. Yang terbaik adalah menggunakan nilai href placeholder pada jangkar untuk memastikan itu diperlakukan sebagai hyperlink.

Lihat demo ini yang menunjukkan perbedaan gaya dan perilaku.


1
Jawaban lengkap. Tapi, apa arti dari pratinjau templat istilah dalam jawaban Anda?
overexchange

3
@exexchange Sebagai contoh, lihat halaman ini dan tautannya : ironsummitmedia.github.io/startbootstrap-creative Hanya halaman html yang dimaksudkan untuk menunjukkan seperangkat CSS / HTML, tema WordPress, dll, tetapi bukan halaman asli, jadi tautannya tidak perlu kemana-mana.
m59

1
@ Yeung Mengubah hash (itu bagian dari url setelah #) tidak memanggil server. Anda akan mengubah halaman dengan javascript. Ada banyak hal untuk dikatakan tentang subjek ini dan itu berada di luar cakupan posting ini.
m59

2
Juga, berita gembira acak, peramban Android (peramban, chrome, dll) tidak akan menerima peristiwa klik pada apa pun selain tag jangkar. Jadi katakan Anda ingin menggunakan .click()metode jQuery pada <div></div>, itu tidak akan berfungsi. Entah harus berada di jangkar atau Anda harus menggunakan touchacara.
Steely

1
@QHarr Saya tidak positif, tapi itu seharusnya karena "#" kosong tidak merujuk pada apa pun, jadi sama dengan meninggalkannya, dan meninggalkannya akan merujuk hanya pada halaman, dan halaman mulai pada atas kecuali diberitahu sebaliknya. Dengan kata lain, mungkin itu tidak berarti "gulir ke atas", itu tidak berarti apa-apa yaitu "pergi ke halaman ini", yang kebetulan berarti pergi ke bagian atas halaman.
m59

85

Menempatkan simbol "#" sebagai href untuk sesuatu berarti ia menunjuk bukan ke URL yang berbeda, tetapi lebih ke id atau tag nama lain pada halaman yang sama. Sebagai contoh:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Namun, jika tidak ada id atau nama maka ia pergi "tidak ke mana."

Berikut pertanyaan serupa yang diajukan pada Penanda HTML dengan 'nama' atau 'id'?


1
Elemen dengan ID - itu tidak harus menjadi jangkar bernama (dan sebenarnya jangkar bernama telah ditinggalkan untuk sementara waktu sekarang).
Oded

2
Saya datang ke sini karena <a href="#">...</a>tidak "ke mana-mana" itu meninggalkan halaman dan memuat site.com/#. Bagaimana mungkin?
doug65536

7
@ doug65536 kemungkinan besar itu karena onclickpengendali acara diikat ke elemen itu, menyebabkan fungsi javascript disebut yang mengarahkan Anda ke halaman itu.
jtate

32

Ini adalah tautan yang menghubungkan ke mana saja pada dasarnya (itu hanya menambahkan "#" ke URL). Ini digunakan untuk sejumlah alasan berbeda. Misalnya, jika Anda menggunakan semacam JavaScript / jQuery dan tidak ingin HTML yang sebenarnya untuk ditautkan di mana saja.

Ini juga digunakan untuk jangkar halaman, yang digunakan untuk mengarahkan ulang ke bagian halaman yang berbeda.


40
Hanya untuk menambahkan, itu bukan tautan ke mana pun ... pada halaman gulir itu akan otomatis menggulir Anda ke atas.
Misko

26

Sayangnya, penggunaan yang paling umum <a href="#">adalah oleh pemrogram malas yang menginginkan elemen kode-javascript non-hyperlink yang dapat diklik yang berperilaku seperti jangkar, tetapi mereka tidak dapat ditambahkan untuk menambah cursor: pointer;atau :hovergaya ke kelas untuk elemen non-hyperlink mereka, dan juga tambahan terlalu malas untuk mengatur hrefke javascript:void(0);.

Masalah dengan ini adalah bahwa satu <a href="#" onclick="some_function();">atau lain pasti berakhir dengan kesalahan javascript, dan jangkar dengan kesalahan javascript onclick selalu berakhir setelah itu href. Biasanya ini menjadi lompatan yang menyebalkan ke bagian atas halaman, tetapi dalam kasus situs yang menggunakan <base>, <a href="#">ditangani sebagai <a href="[base href]/#">, menghasilkan navigasi yang tidak terduga. Jika ada kesalahan yang dapat dicatat yang dihasilkan, Anda tidak akan melihatnya dalam kasus terakhir kecuali Anda mengaktifkan log yang persisten.

Jika elemen jangkar yang digunakan sebagai non-jangkar itu harus memiliki nya hrefset untuk javascript:void(0);demi anggun degradasi.

Saya hanya membuang waktu dua hari untuk men-debug redirect halaman tak terduga acak yang seharusnya hanya me-refresh halaman, dan akhirnya melacaknya ke fungsi yang meningkatkan event klik dari <a href="#">. Mengganti #dengan javascript:void(0);memperbaikinya.

Hal pertama yang saya lakukan hari Senin adalah membersihkan proyek dari semua contoh <a href="#">.


4
"Jika elemen jangkar digunakan sebagai non-jangkar, elemen tersebut harus memiliki href yang disetel ke javascript: void (0); demi degradasi yang anggun." [rujukan?]
Vito De Tullio

Y, dengan dan tanpa <base>benar - benar membuat perbedaan besar untuk #. Terima kasih telah menunjukkan!
LeOn - Han Li

Saya hanya membuang waktu dua hari untuk men-debug redirect halaman tak terduga acak yang seharusnya hanya me-refresh halaman, dan akhirnya melacaknya ke fungsi yang meningkatkan acara klik dari <a href="#">. Mengganti # dengan javascript: void (0); memperbaikinya. - Saya melakukan hal yang sama dan juga menyelesaikan masalah saya.
Liang

23

Daftar yang tidak teratur sering dibuat dengan maksud untuk menggunakannya sebagai menu, tetapi liitem daftar adalah teks. Karena liitem daftar adalah teks, penunjuk tetikus tidak akan menjadi panah, tetapi "kursor I". Pengguna terbiasa melihat jari menunjuk untuk penunjuk mouse ketika sesuatu dapat diklik. Menggunakan tag jangkar adi dalam litag menyebabkan pointer mouse berubah menjadi jari yang menunjuk. Jari pengarah jauh lebih baik untuk menggunakan daftar sebagai menu.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Jika daftar sedang digunakan untuk menu, dan tidak perlu tautan, maka URL tidak perlu ditunjuk. Tetapi masalahnya adalah jika Anda meninggalkan hrefatribut, teks dalam <a>tag dilihat sebagai teks, dan oleh karena itu pointer mouse kembali ke kursor-I. Kursor-I mungkin membuat pengguna berpikir bahwa item menu tidak dapat diklik. Karena itu, Anda masih memerlukan href, tetapi Anda tidak perlu tautan ke mana pun.

Anda bisa menggunakan banyak divatau ptag untuk daftar menu, tetapi penunjuk tetikus juga akan menjadi kursor-I untuk mereka.

Anda dapat menggunakan banyak tombol yang ditumpuk satu sama lain untuk daftar menu, tetapi daftar tersebut tampaknya lebih disukai. Dan itu mungkin mengapa href="#"yang menunjuk ke tempat digunakan dalam tag jangkar di dalam tag daftar.

Anda dapat mengatur gaya pointer di CSS, jadi itu adalah pilihan lain. Ke href="#"mana-mana mungkin hanya cara malas untuk mengatur beberapa gaya.


14

Masalah dengan menggunakan href = "#" untuk tautan kosong adalah ia akan membawa Anda ke bagian atas halaman yang mungkin bukan tindakan yang diinginkan. Untuk menghindari ini, untuk peramban yang lebih lama atau dokumen yang bukan HTML5, gunakan

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

2
Saya menemukan solusi ini sangat berguna untuk satu skenario: dalam aplikasi saya, href = '"" digunakan untuk mengimplementasikan fungsionalitas logout (bawa ke halaman login). Jika saya menggunakan href = "#" untuk tujuan lain, kadang akan membawa saya kembali ke halaman login. Setelah saya mengubah href = "#" menjadi href = "javascript: void (0)", masalah telah teratasi.
Liang

13

Sejauh yang saya tahu itu biasanya tempat penampung untuk tautan yang memiliki beberapa JavaScript yang melekat padanya. Titik utama tautan dilayani dengan mengeksekusi kode JavaScript; browser dengan dukungan JS kemudian abaikan target tautan yang sebenarnya. Jika browser tidak mendukung JS, tanda hash pada dasarnya mengubah tautan menjadi no-op. Lihat juga JavaScript yang tidak mengganggu .


13

Seperti yang ditunjukkan beberapa jawaban lain, aelemen tersebut membutuhkan hrefatribut dan #digunakan sebagai pengganti, tetapi juga merupakan artefak sejarah.

Dari Jaringan Pengembang Mozilla :

href

Ini adalah atribut yang diperlukan tunggal untuk jangkar mendefinisikan tautan sumber hypertext, tetapi tidak lagi diperlukan dalam HTML5. Menghilangkan atribut ini membuat tautan placeholder. Atribut href menunjukkan target tautan, baik URL atau fragmen URL. Fragmen URL adalah nama yang diawali dengan tanda pagar (#), yang menentukan lokasi target internal (ID) dalam dokumen saat ini.

Juga, sesuai spesifikasi HTML5 :

Jika elemen tidak memiliki atribut href, maka elemen tersebut mewakili placeholder untuk tempat tautan mungkin ditempatkan, jika itu relevan, yang terdiri dari hanya konten elemen.


1

Atribut href mendefinisikan URL sumber daya suatu tautan. Jika tag anchor tidak memiliki tag href maka tidak akan menjadi hyperlink. Atribut href memiliki nilai-nilai berikut:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>
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.