Tautan

Dalam pengantar atribut, kami membagikan contoh cara menambahkan atribut ke tag pembuka. Contoh tersebut menggunakan tag <a>, tetapi elemen maupun atribut spesifik yang diperkenalkan dalam contoh tersebut tidak dibahas.

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

Kekuatan web, dan tag <a>, telah berkembang pesat sejak Tim Berners-Lee memublikasikan penjelasan pertamanya 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. Ada juga bagian pembelajaran formulir. Dalam sesi ini, Anda akan mengetahui tag <a> satu huruf yang tidak terlalu sederhana.

Atribut href

Meskipun tidak wajib, atribut href ditemukan di hampir semua tag <a>. Dengan memberikan alamat hyperlink, <a> akan berubah menjadi link. Atribut href digunakan untuk membuat hyperlink ke lokasi dalam halaman saat ini, halaman lain dalam situs, atau situs lain secara keseluruhan. URL ini juga dapat dikodekan untuk mendownload file atau mengirim email ke alamat tertentu, bahkan menyertakan subjek dan konten 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 menyertakan URL absolut, yang dapat digunakan di situs mana pun di dunia untuk membuka halaman beranda MLW. URL absolut mencakup protokol, dalam hal ini https://, dan nama domain. Jika protokol ditulis sebagai //, itu adalah protokol implisit dan berarti "gunakan protokol yang sama dengan yang sedang aktif digunakan".

URL relatif tidak menyertakan protokol atau nama domain. Jalur ini "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 ditautkan 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 bahkan hanya <a href="#">Top</a> akan mengembalikan pengguna ke bagian atas halaman, kecuali jika ada elemen dengan ID top yang ditetapkan dalam huruf yang sama.

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

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

Link ketiga menggabungkan kedua nilai: link ini berisi URL absolut yang diikuti dengan fragmen link. Hal ini memungkinkan penautan langsung ke bagian dalam URL yang ditentukan, dalam hal ini, bagian #teachers di halaman beranda MLW. Halaman MLW dimuat dan browser men-scroll ke bagian pengajar, tanpa mengirimkan 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 menyertakannya, bersama dengan teks cc, bcc, subject, dan body untuk mengisi email secara otomatis. Secara default, program email akan dibuka. Anda dapat mengisi subjek dan isi email terlebih dahulu tanpa alamat email, untuk memungkinkan pengunjung situs mengundang teman mereka sendiri. Di link kami, 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 persentase, yang jelas diperlukan jika nilai href tidak diapit tanda kutip atau jika nilai menyertakan tanda kutip.

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

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

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

Materi yang dapat didownload

Atribut download harus disertakan saat href mengarah ke resource yang dapat didownload. Nilai atribut download adalah nama file yang disarankan untuk resource yang akan disimpan di sistem file lokal pengguna. SVGOMG, Pengoptimal SVG, menggunakan atribut download untuk menyarankan nama file bagi blob yang dapat didownload yang dibuat oleh pengoptimal. Jika hal.svg dioptimalkan, tag pembuka link download SVGOMG akan terlihat seperti:

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

Ada 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 untuk 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 diawali dengan garis bawah dibahas dengan elemen <base>. Hal ini mencakup:

• (Default) _self: Buka link di jendela saat ini.
• _blank: Buka link di tab baru.
• _parent: Buka link di objek induk atau iframe.
• _top: Buka link di ancestor paling atas. Hal ini sangat berguna jika link bertingkat dalam.

Jika link tidak bertingkat, _top dan _parent bertindak sama seperti _self. Atribut target tidak terbatas pada empat istilah utama ini: istilah apa pun dapat digunakan.

Setiap konteks penjelajahan (atau setiap tab browser) memiliki nama konteks penjelajahan. Link dapat membuka link di tab saat ini, tab baru tanpa nama, atau tab baru atau yang sudah ada dengan nama. Secara default, nama adalah string kosong.

Untuk membuka link di tab baru, pengguna dapat mengklik kanan dan memilih "Buka di tab baru". Developer dapat memaksakan hal ini dengan menyertakan target="_blank".

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

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

Kata kunci nofollow dapat disertakan jika Anda tidak ingin spider mengikuti link. 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; gunakan properti CSS cursor sebagai gantinya. Nilai prev dan next dapat digunakan pada link yang mengarah ke dokumen sebelumnya dan berikutnya dalam rangkaian.

Mirip 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 berbeda, sertakan atribut hreflang.

Dalam contoh ini, kami menyertakan URL halaman yang diterjemahkan sebagai nilai href, rel="alternate" untuk menunjukkan bahwa halaman tersebut adalah versi alternatif dari sebuah situs; atribut hreflang menyediakan 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 dalam bahasa Prancis adalah PDF, Anda dapat memberikan atribut jenis dengan jenis MIME PDF dari resource tertaut. Meskipun jenis MIME bersifat saran, sebaiknya beri 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 mengirimkan ping ke URL saat link diklik. Atribut ping, jika ada, menyertakan daftar URL aman yang dipisahkan dengan spasi (yang dimulai dengan https) yang harus diberi tahu, atau diping, jika pengguna mengaktifkan hyperlink. Browser mengirimkan 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 memadai tentang resource yang ditautkan sehingga pengguna tahu apa yang mereka klik.
• Dalam blok teks, tampilan link Anda harus cukup berbeda dari teks di sekitarnya, sehingga pengguna dapat lebih mudah mengidentifikasi link dari konten lainnya. Gunakan beberapa indikator visual, seperti warna dan garis bawah. Warna saja tidak cukup.
• Selalu sertakan gaya fokus. Hal ini membantu pengguna yang menggunakan keyboard mengetahui posisi mereka saat berpindah-pindah konten Anda dengan tombol tab.
• Konten di antara <a> pembuka dan </a> penutup adalah nama default link yang dapat diakses dan harus memberi tahu pengguna tentang tujuan atau tujuan link. Jika konten link adalah gambar, deskripsi alt adalah nama yang mudah diakses. Teks link dan teks alt harus lebih deskriptif daripada "klik di sini" atau "informasi selengkapnya". Sebagai gantinya, link harus menawarkan informasi kepada pengguna tentang ke mana mereka akan diarahkan saat link diaktifkan. Hal ini sangat penting bagi pengguna pembaca layar dan hasil mesin telusur.
• Jangan sertakan konten interaktif, seperti <button> atau <input>, di dalam link. Jangan menyematkan link dalam <button> atau <label>. Meskipun halaman HTML akan tetap dirender, menyematkan elemen yang dapat difokuskan dan diklik di dalam elemen interaktif akan menciptakan pengalaman pengguna yang buruk.
• Jika atribut href ada, menekan tombol Enter saat 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 membuat daftar link, yang juga dikenal sebagai navigasi.

Uji pemahaman Anda

Uji pengetahuan Anda tentang link.