Tautan

Di bagian pengantar atribut, Anda telah melihat contoh yang menunjukkan cara menambahkan atribut ke tag pembuka. Contoh tersebut menggunakan tag <a>, tetapi tidak membahas elemen atau atribut khusus yang diperkenalkan dalam contoh tersebut:

Tag anchor <a>, beserta atribut href, membuat hyperlink. Link adalah tulang punggung internet. Halaman web pertama berisi 25 link, yang bertuliskan "Semua yang ada secara online tentang W3 ditautkan langsung atau tidak langsung ke dokumen ini". Kemungkinan besar, segala sesuatu yang ada di {i>online<i} tentang W3 ditautkan langsung atau tidak langsung dari dokumen ini juga!

Kecanggihan web, dan tag <a>, telah berkembang pesat sejak Tim Berners-Lee memublikasikan penjelasan pertama ini pada Agustus 1991. Link mewakili koneksi antara dua resource, salah satunya adalah dokumen saat ini. Link dapat dibuat oleh <a>, <area>, <form>, dan <link>. Anda telah mempelajari <link>, dan akan menemukan formulir di bagian terpisah. Tersedia juga bagian pembelajaran formulir. Dalam sesi ini, Anda akan mempelajari tag <a> satu huruf yang tidak terlalu sederhana.

Atribut href

Meskipun tidak wajib, atribut href dapat ditemukan di hampir semua tag <a>. Memberikan alamat hyperlink adalah hal yang mengubah <a> menjadi link. Atribut href digunakan untuk membuat hyperlink ke lokasi di halaman saat ini, halaman lain dalam sebuah situs, atau situs lain. Pesan juga dapat dikodekan untuk mendownload file atau mengirim email ke alamat tertentu, bahkan termasuk subjek dan isi isi email yang disarankan.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Link pertama berisi URL absolut, yang dapat digunakan di situs mana pun di dunia untuk membuka halaman beranda MLW. URL absolut menyertakan protokol, dalam hal ini https://, dan nama domain. Jika protokol ditulis hanya sebagai //, protokol tersebut merupakan protokol implisit yang berarti "gunakan protokol yang sama dengan yang digunakan saat ini".

URL relatif tidak berisi protokol atau nama domain. File tersebut "relatif" terhadap file saat ini. MLW adalah situs satu halaman, tetapi seri HTML ini memiliki beberapa bagian. Untuk menautkan dari halaman ini ke pelajaran atribut, URL relatif digunakan <a href="../attributes/">Attributes</a>.

Link kedua hanyalah ID fragmen link, dan akan menautkan ke elemen dengan id="teachers", jika ada, di halaman saat ini. Browser juga mendukung dua link "bagian atas halaman": mengklik <a href="#top">Top</a> (tidak peka huruf besar/kecil) atau cukup <a href="#">Top</a> akan men-scroll pengguna ke bagian atas halaman, kecuali jika ada elemen dengan ID top yang ditetapkan dalam huruf besar/kecil yang sama.

MLW adalah dokumen yang cukup panjang. Untuk menyimpan scrolling, Anda dapat menambahkan link kembali ke atas dari bawah bagian #pengajar:

<a href="#top">Go to top.</a>

Link ketiga menggabungkan dua nilai: link ini berisi URL mutlak yang diikuti dengan fragmen link. Hal ini memungkinkan penautan langsung ke bagian di URL yang ditentukan, dalam hal ini, bagian #teachers halaman beranda MLW. Halaman MLW akan dimuat, lalu browser akan men-scroll ke bagian pengajar tanpa mengirim fragmen dalam permintaan HTTP.

Atribut href dapat dimulai dengan mailto: atau tel: untuk mengirim email atau melakukan panggilan, dengan penanganan link bergantung pada perangkat, sistem operasi, dan aplikasi yang diinstal.

Link mailto tidak perlu menyertakan alamat email, tetapi dapat, bersama dengan teks cc, bcc, subject, dan body untuk mengisi email secara otomatis. Secara default, program email akan terbuka. Anda dapat mengisi subjek dan isi email tanpa alamat email, untuk memungkinkan pengunjung situs mengundang teman mereka sendiri. Di link, di footer dokumen, kami menyertakan URL ke pendaftaran:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Tanda tanya (?) memisahkan mailto: dan alamat email, jika ada, dari istilah kueri. Dalam kueri, ampersand (&) memisahkan kolom, dan tanda sama dengan (=) menyamakan setiap nama kolom dengan nilainya. Seluruh string dienkode dalam persen, yang tentu saja diperlukan jika nilai href tidak diberi tanda kutip atau jika nilai menyertakan tanda kutip.

Aplikasi yang terbuka saat pengguna mengklik, mengetuk, atau menekan Enter pada link tel bergantung pada sistem operasi, aplikasi yang diinstal, dan setelan yang dimiliki pengguna di perangkat mereka. iPhone dapat membuka FaceTime, aplikasi telepon, atau kontak. Desktop Windows mungkin membuka Skype, jika terinstal.

Ada beberapa jenis URL lainnya, seperti blob dan URL data (lihat contoh dalam diskusi atribut download). Untuk situs aman (yang disalurkan melalui https), Anda dapat membuat dan menjalankan protokol khusus aplikasi dengan registerProtocolHandler().

Saat menyertakan link yang mungkin akan membuka aplikasi terinstal lainnya, sebaiknya beri tahu pengguna. Pastikan teks di antara tag pembuka dan penutup memberi tahu pengguna jenis link yang akan mereka aktifkan. Pemilih atribut CSS, seperti [href^="mailto:"], [href^="tel:"], dan [href$=".pdf"] dapat digunakan untuk menargetkan gaya menurut jenis aplikasi.

Referensi yang dapat didownload

Atribut download harus disertakan jika href mengarah ke resource yang dapat didownload. Nilai atribut download adalah nama file yang disarankan untuk resource yang akan disimpan dalam sistem file lokal pengguna. SVGOMG, SVG Optimizer, menggunakan atribut download untuk menyarankan nama file untuk blob yang dapat didownload yang dibuat oleh pengoptimal. Saat hal.svg dioptimalkan, tag pembuka link download SVGOMG akan serupa dengan:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Terdapat juga demo <canvas> yang membuat URL data PNG yang dapat didownload.

Untuk menautkan ke resource yang dapat didownload, sertakan URL aset sebagai nilai atribut href dan nama file yang disarankan yang dapat digunakan di sistem file pengguna sebagai nilai atribut download.

Konteks penjelajahan

Atribut target memungkinkan penentuan konteks penjelajahan untuk navigasi link (dan pengiriman formulir. Empat kata kunci yang tidak peka huruf besar/kecil dan berawalan garis bawah dibahas dengan elemen <base>. Hal ini mencakup _self default, yang merupakan jendela saat ini, _blank, yang membuka link di tab baru, _parent, yang merupakan induk jika link saat ini disarangkan dalam objek atau iframe, dan _top, yang merupakan ancestor paling atas, terutama berguna jika link saat ini berada dalam bertingkat banyak. _top dan _parent sama dengan _self jika link tidak bertingkat. Atribut target tidak terbatas pada empat istilah utama ini: Anda dapat menggunakan istilah apa pun.

Setiap konteks penjelajahan—pada dasarnya, setiap tab browser—memiliki nama konteks penjelajahan. Link dapat membuka link di tab saat ini, tab tanpa nama baru, atau tab bernama baru atau yang sudah ada. Secara default, namanya adalah string kosong. Untuk membuka link di tab baru, pengguna dapat mengklik kanan dan memilih "Buka di tab baru". Developer dapat memaksanya dengan menyertakan target="_blank".

Link dengan target="_blank" akan dibuka di tab baru dengan nama null, sehingga membuka tab baru tanpa nama dengan setiap klik link. Tindakan ini dapat membuat banyak tab baru. Terlalu banyak tab. Misalnya, jika pengguna mengklik <a href="registration.html" target="_blank">Register Now</a> 15 kali, formulir pendaftaran akan dibuka di 15 tab terpisah. Masalah ini dapat diperbaiki dengan memberikan nama konteks tab. Dengan menyertakan atribut target dengan nilai yang peka huruf besar/kecil—seperti <a href="registration.html" target="reg">Register Now</a>—klik pertama pada link ini akan membuka formulir pendaftaran di tab reg baru. Mengklik link ini 15 kali lagi akan memuat ulang pendaftaran dalam konteks penjelajahan reg, tanpa membuka tab tambahan.

Atribut rel mengontrol jenis link yang dibuat oleh link, sehingga menentukan hubungan antara dokumen saat ini dan resource yang ditautkan dalam hyperlink. Nilai atribut harus berupa daftar yang dipisahkan spasi di satu atau beberapa skor nilai atribut rel yang didukung oleh tag <a>.

Kata kunci nofollow dapat disertakan jika Anda tidak ingin spider mengikuti link tersebut. Nilai external dapat ditambahkan untuk menunjukkan bahwa link mengarah ke URL eksternal dan bukan halaman dalam domain saat ini. Kata kunci help menunjukkan bahwa hyperlink akan memberikan bantuan yang sensitif terhadap konteks. Mengarahkan kursor ke link dengan nilai rel ini akan menampilkan kursor bantuan, bukan kursor pointer normal. Jangan gunakan nilai ini hanya untuk mendapatkan kursor bantuan. Sebagai gantinya, gunakan properti cursor CSS. Nilai prev dan next dapat digunakan pada link yang mengarah ke dokumen sebelumnya dan berikutnya dalam sebuah rangkaian.

Serupa dengan <link rel="alternative">, arti <a rel="alternative"> bergantung pada atribut lainnya. Alternatif feed RSS juga akan menyertakan type="application/rss+xml" atau type="application/atom+xml, format alternatif akan menyertakan atribut type, dan terjemahan akan menyertakan atribut hreflang. Jika konten di antara tag pembuka dan penutup menggunakan bahasa selain bahasa dokumen utama, sertakan atribut lang. Jika bahasa dokumen yang ditautkan dalam bahasa yang berbeda, sertakan atribut hreflang.

Dalam contoh ini, kami menyertakan URL halaman yang diterjemahkan sebagai nilai href, rel="alternate" untuk menunjukkan bahwa ini adalah versi alternatif situs; atribut hreflang memberikan bahasa terjemahan:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Jika terjemahan bahasa Prancis adalah PDF, Anda dapat memberikan atribut jenis dengan jenis MIME PDF resource tertaut. Meskipun jenis MIME hanya bersifat saran, tetapi sebaiknya Anda memberi tahu pengguna bahwa link akan membuka dokumen dengan format yang berbeda.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Melacak klik link

Salah satu cara untuk melacak interaksi pengguna adalah dengan melakukan ping pada URL saat link diklik. Atribut ping, jika ada, menyertakan daftar URL aman yang dipisahkan spasi (yang dimulai dengan https) yang harus diberi tahu, atau di-ping, jika pengguna mengaktifkan hyperlink. Browser mengirim permintaan POST dengan isi PING ke URL yang tercantum sebagai nilai atribut ping.

Tips pengalaman pengguna

• Selalu pertimbangkan pengalaman pengguna saat menulis HTML. Link harus memberikan informasi yang cukup tentang resource tertaut sehingga pengguna tahu apa yang mereka klik.
• Dalam blok teks, pastikan tampilan link Anda cukup berbeda dengan teks di sekitarnya sehingga pengguna dapat dengan mudah mengidentifikasi link dari konten lainnya, sehingga memastikan bahwa warna saja bukan satu-satunya cara membedakan antara teks dan konten di sekitarnya.
• Selalu sertakan gaya fokus; cara ini memungkinkan navigator keyboard mengetahui posisi mereka saat menjelajahi konten Anda melalui tab.
• Konten di antara <a> pembuka dan </a> penutup adalah nama default link yang dapat diakses dan harus menginformasikan tujuan atau tujuan link kepada pengguna. Jika konten link adalah gambar, deskripsi alt adalah nama yang dapat diakses. Baik nama yang dapat diakses berasal dari atribut alt atau sebagian kata dalam blok teks, pastikan nama tersebut memberikan informasi tentang tujuan link. Teks tautan harus lebih deskriptif dibandingkan "klik di sini" atau "informasi selengkapnya"; ini penting bagi pengguna pembaca layar dan hasil mesin telusur Anda!
• Jangan sertakan konten interaktif, seperti <button> atau <input>, di dalam link. Jangan menumpuk link dalam <button> atau <label> juga. Meskipun halaman HTML akan tetap dirender, menyarangkan elemen yang dapat difokuskan dan dapat diklik di dalam elemen interaktif akan menciptakan pengalaman pengguna yang buruk.
• Jika atribut href ada, menekan tombol Enter sambil berfokus pada elemen <a> akan mengaktifkannya.
• Link tidak terbatas pada HTML. Elemen a juga dapat digunakan dalam SVG, yang membentuk link dengan atribut 'href' atau 'xlink:href'.

Link dan JavaScript

Atribut links menampilkan HTMLCollection yang cocok dengan elemen a dan area yang memiliki atribut href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

Di bagian ini, Anda telah mempelajari semua hal tentang link. Bagian berikutnya membahas daftar, yang perlu kita pelajari agar dapat mengelompokkannya untuk membuat daftar link (juga dikenal sebagai navigasi).

Menguji pemahaman Anda

Uji pengetahuan Anda tentang link.