Berlaku untuk menggunakan <a> (jangkar tag) tanpa atribut href?

Saya telah menggunakan Bootstrap Twitter untuk membangun sebuah situs, dan banyak fungsinya tergantung pada membungkus sesuatu <a>, bahkan jika mereka hanya akan menjalankan Javascript. Saya mempunyai masalah dengan href="#"taktik yang direkomendasikan oleh dokumentasi Bootstrap, jadi saya mencoba mencari solusi yang berbeda.

Tapi kemudian saya mencoba menghapus hrefatributnya sama sekali. Saya telah menggunakan <a class='bunch of classes' data-whatever='data'>, dan memiliki Javascript menangani sisanya. Dan itu berhasil.

Namun ada sesuatu yang memberitahuku bahwa aku seharusnya tidak melakukan ini. Baik? Maksudku, secara teknis <a>seharusnya menjadi tautan ke sesuatu, tapi aku tidak sepenuhnya yakin mengapa ini menjadi masalah. Atau itu?

The <a>elemen nchor hanyalah sebuah jangkar ke atau dari beberapa konten. Awalnya spesifikasi HTML diizinkan untuk nama anchor ( <a name="foo">) dan anchor yang dikaitkan ( <a href="#foo">).

Format jangkar bernama kurang umum digunakan, karena pengidentifikasi fragmen sekarang digunakan untuk menentukan [id]atribut (meskipun untuk kompatibilitas mundur Anda masih dapat menentukan [name]atribut). Sebuah <a>elemen tanpa [href]atribut masih berlaku .

Sejauh menyangkut semantik dan gaya, <a>elemen tersebut bukan tautan ( :link) kecuali memiliki [href]atribut. Efek samping dari ini adalah bahwa <a>elemen tanpa [href]tidak akan ada dalam urutan tab secara default.

Pertanyaan sebenarnya adalah apakah <a>elemen itu sendiri merupakan representasi yang tepat dari a <button>. Pada tingkat semantik, ada perbedaan yang jelas antara a linkdan a button.

Sebuah tombol adalah sesuatu yang ketika diklik menyebabkan suatu tindakan terjadi.

Tautan adalah tombol yang menyebabkan perubahan navigasi dalam dokumen saat ini. Navigasi yang terjadi dapat bergerak di dalam dokumen dalam kasus pengidentifikasi fragmen ( #foo) atau pindah ke dokumen baru dalam kasus url ( /bar).

Karena tautan adalah jenis tombol khusus, mereka sering kali dikesampingkan untuk melakukan fungsi alternatif. Terus menggunakan jangkar sebagai tombol ok dari sudut pandang konsistensi, meskipun secara semantik tidak cukup akurat.

Jika Anda khawatir tentang semantik dan aksesibilitas menggunakan <a>elemen (atau <span>, atau <div>) sebagai tombol, Anda harus menambahkan atribut berikut:

<a role="button" tabindex="0" ...>...</a>

The Peran tombol memberitahu pengguna bahwa elemen tertentu sedang diperlakukan sebagai tombol sebagai override untuk semantik apapun elemen yang mendasari mungkin memiliki.

Untuk <span>dan <div>elemen, Anda mungkin ingin menambahkan pendengar kunci JavaScript untuk Spaceatau Entermemicu clickacara. <a href>dan <button>elemen melakukan ini secara default, tetapi elemen non-tombol tidak. Terkadang lebih masuk akal untuk mengikat clickpelatuk ke tombol lain. Misalnya, tombol "bantuan" di aplikasi web mungkin terikat F1.

Saya pikir Anda dapat menemukan jawaban Anda di sini: Apakah tag jangkar tanpa atribut href aman?

Juga jika Anda ingin tidak ada operasi tautan dengan href, Anda dapat menggunakannya seperti:

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

Ya, valid untuk menggunakan tag anchor tanpa hrefatribut.

Jika aelemen tidak memiliki hrefatribut, maka elemen tersebut mewakili placeholder di mana tautan mungkin telah ditempatkan, jika sudah relevan, hanya terdiri dari konten elemen.

Ya, Anda dapat menggunakan classdan atribut lainnya, tetapi Anda tidak dapat menggunakan target, download, rel, hreflang, dantype .

The target, download, rel, hreflang, dan typeatribut harus dihilangkan jika atribut href tidak hadir.

Adapun bagian " Haruskah Saya? ", Lihat kutipan pertama: "di mana tautan mungkin telah ditempatkan jika sudah relevan ". Jadi saya akan bertanya " Jika saya tidak punya JavaScript, apakah saya akan menggunakan tag ini sebagai tautan? ". Jika jawabannya adalah ya, maka ya, Anda harus menggunakannya <a>tanpa href. Jika tidak, maka saya masih akan menggunakannya, karena produktivitas lebih penting bagi saya daripada semantik kasus tepi, tetapi ini hanya pendapat pribadi saya.

Selain itu, Anda harus berhati - hati terhadap perilaku dan gaya yang berbeda (mis. Tidak ada garis bawah, tidak ada kursor kursor, bukan a :link).

Sumber: W3C HTML5 Rekomendasi

Itu sah. Anda dapat, misalnya, menggunakannya untuk menampilkan modals (atau hal serupa yang merespons data-toggledan data-targetatribut).

Sesuatu seperti:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Di sini saya menggunakan ikon font-awesome, yang lebih baik sebagai atag daripada button, untuk menunjukkan modal. Selain itu, pengaturan role="button"membuat pointer berubah menjadi jenis tindakan. Tanpa salah satu hrefatau role="button", kursor kursor tidak berubah.