Apa itu href = "#" dan mengapa digunakan?

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

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://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.

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'?

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.

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="#">.

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.

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>

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 .

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.

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>