Tautan

Tautan menghubungkan satu halaman dengan halaman lain, dengan bagian tertentu dari satu halaman, dan dengan berkas yang dapat diunduh. Topik ini membahas elemen a beserta atribut href, perbedaan alamat absolut dan relatif, tautan ke penanda dalam halaman, pembukaan tautan di tab baru, serta atribut download. Setelah mengikuti topik ini, satu halaman berisi ragam tautan yang lengkap dan aman dapat disusun.

Elemen a dan atribut href#

Elemen a adalah anchor, yaitu penanda yang menjadikan teks atau gambar di dalamnya sebagai tautan. Atribut href menentukan alamat tujuan, dan a tanpa href tidak dapat ditekan. Karena a merupakan elemen sebaris, tautan lazim ditulis di dalam paragraf agar mengalir bersama teks yang mengelilinginya.

<p>
  Ringkasan elemen HTML terdapat pada
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">halaman referensi MDN Web Docs</a>.
</p>

Frasa yang menjadi teks tautan menyatakan tujuannya secara jelas. Frasa seperti “klik di sini” tidak membawa informasi apa pun ketika dibaca terpisah dari kalimatnya, padahal pembaca layar kerap mendaftar seluruh tautan pada halaman sebagai daftar yang berdiri sendiri. Frasa tautan yang baik cukup menyebut judul halaman tujuan atau isi yang diperoleh dari tautan itu.

Alamat absolut dan relatif#

Nilai href terbagi ke dalam dua bentuk besar. Alamat absolut menuliskan alamat lengkap beserta protokol dan domain, misalnya https://developer.mozilla.org/en-US/docs/Web/HTML, sehingga berlaku dari lokasi mana pun. Alamat relatif hanya menuliskan letak tujuan terhadap berkas yang sedang membukanya, sehingga pendek dan tetap benar ketika folder proyek dipindah secara utuh.

Perhatikan struktur folder berikut, yang akan dibuat pada bagian ini.

situs-kerja/
├── index.html
├── tentang.html
└── gambar/
    └── logo.svg

Dari berkas index.html, tabel berikut merangkum nilai href untuk setiap tujuan.

Struktur folder pada pohon di atas dibuat dari terminal dengan perintah berikut.

# membuat struktur folder contoh
mkdir -p situs-kerja/gambar
# membuat berkas halaman dan asetnya
touch situs-kerja/index.html situs-kerja/tentang.html situs-kerja/gambar/logo.svg
# menampilkan struktur folder yang terbentuk
ls -R situs-kerja

situs-kerja:
gambar
index.html
tentang.html

situs-kerja/gambar:
logo.svg

Opsi -R pada ls menampilkan isi setiap subfolder secara bertingkat, termasuk folder gambar di dalam situs-kerja. Struktur pada keluaran sama dengan pohon yang diuraikan di atas, sehingga setiap nilai href relatif pada tabel dapat diuji langsung dari index.html. Perubahan letak berkas selalu diikuti penyesuaian nilai href relatif yang menunjuknya.

Tautan ke bagian dalam halaman#

Tujuan tautan tidak selalu berupa halaman lain. Atribut id yang dipasang pada sebuah elemen menjadikannya penanda tempat, dan href berisi tanda pagar diikuti nama id-nya akan melompat ke elemen tersebut. Tautan href="#kata-penutup" menuju elemen dengan id="kata-penutup" pada halaman yang sama, sedangkan href="#" tanpa nama hanya kembali ke bagian atas halaman.

Pola ini lazim dipakai untuk daftar isi sebuah halaman panjang. Setiap judul bagian diberi id, kemudian daftar isi di bagian atas halaman berisi tautan ke setiap id tersebut. Penanda juga memungkinkan satu halaman membuka bagian tertentu dari halaman lain dengan menggabungkan alamat berkas dan tanda pagar, misalnya tentang.html#sejarah.

Membuka tautan di tab baru#

Atribut target="_blank" memerintahkan browser membuka tujuan pada tab baru. Tautan seperti itu wajib disertai rel="noopener noreferrer". Tanpa atribut rel tersebut, halaman tujuan menerima akses ke objek window.opener pada tab asalnya. Halaman yang berbahaya dapat memanfaatkan akses tersebut untuk mengganti alamat tab asal melalui teknik yang dikenal sebagai reverse tabnabbing.

Nilai rel dapat memuat kedua kata kunci sekaligus dengan pemisah spasi, sebagaimana tampak pada berkas utuh di bagian akhir topik. Kebiasaan ini berlaku untuk tautan eksternal apa pun yang dibuka di tab baru. Tautan internal antarhalaman satu situs umumnya cukup dibuka pada tab yang sama tanpa kedua atribut itu.

Atribut download#

Atribut download pada a memerintahkan browser mengunduh tujuan alih-alih menavigasinya. Nilai atributnya bersifat opsional dan berfungsi sebagai saran nama berkas hasil unduhan. Browser menghormati atribut ini untuk alamat yang berasal dari situs yang sama dengan halamannya (same origin), sehingga pasangan halaman dan berkas datanya perlu berada dalam satu folder proyek.

Berkas contoh utuh#

Seluruh ragam tautan pada topik ini dikumpulkan dalam dua berkas berikut. Berkas pertama adalah halamannya, sedangkan berkas kedua adalah data yang menjadi sasaran tautan unduhan.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Kumpulan Tautan</title>
  </head>
  <body>
    <h1>Kumpulan Tautan</h1>

    <h2>Tautan absolut</h2>
    <p>
      Ringkasan elemen HTML terdapat pada
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">halaman referensi MDN Web Docs</a>.
    </p>

    <h2>Tautan relatif</h2>
    <p>Halaman <a href="tentang.html">Tentang</a> berada di folder yang sama dengan berkas ini.</p>

    <h2>Tautan ke bagian dalam halaman</h2>
    <p>Lompat ke <a href="#kata-penutup">kata penutup</a>.</p>

    <h2>Tautan menuju tab baru</h2>
    <p>
      Spesifikasi HTML terbuka pada tab baru melalui tautan
      <a href="https://html.spec.whatwg.org/multipage/" target="_blank" rel="noopener noreferrer">HTML Living Standard</a>.
    </p>

    <h2>Tautan unduhan</h2>
    <p><a href="rekap.csv" download>Unduh rekap pengunjung</a></p>

    <h2 id="kata-penutup">Kata Penutup</h2>
    <p>Bagian ini menjadi sasaran tautan dengan penanda id kata-penutup.</p>
  </body>
</html>

hari,pengunjung
Senin,120
Selasa,145
Rabu,98
Kamis,150
Jumat,175

Berkas tautan.html dan rekap.csv diletakkan dalam satu folder, sehingga tautan unduhan menemukan sasarnya. Berkas tentang.html yang dirujuk tautan relatif dibuat mengikuti struktur folder pada bagian alamat relatif. Halaman dibuka dengan browser, kemudian setiap kelompok tautannya dicoba satu per satu untuk mengamati perilaku navigasi, lompatan penanda, tab baru, dan unduhan.

Kesalahan umum#

Frasa tautan berisi klik di sini. Frasa itu tidak menyatakan tujuan ketika daftar tautan dibaca terpisah dari kalimatnya. Tulis frasa yang menjelaskan sasaran, misalnya judul halaman tujuannya.

target="_blank" ditulis tanpa rel. Tab asal terbuka bagi manipulasi melalui window.opener. Tambahkan rel="noopener noreferrer" pada tautan yang sama.

Elemen yang bukan tautan diberi href="#". Tautan kosong seperti itu masuk daftar tautan pembaca layar tanpa membawa tujuan. Aksi yang memicu perubahan pada halaman memakai button, bukan a.

Ringkasan#

• a dengan href membentuk tautan, dan frasa teksnya menyatakan tujuan secara jelas.
• Alamat absolut memuat protokol dan domain, sedangkan alamat relatif dihitung dari letak berkas yang membukanya.
• Tautan ke penanda memakai id pada sasarannya dan href="#nama" pada asalnya.
• target="_blank" selalu disertai rel="noopener noreferrer", dan download mengubah navigasi menjadi unduhan pada sumber yang satu situs.

Referensi#

• Elemen a — MDN Web Docs — Daftar atribut a yang mencakup href, target, rel, dan download.
• Creating hyperlinks — MDN Web Docs — Panduan alamat absolut, relatif, dan penulisan teks tautan.
• Links — WHATWG — Definisi resmi atribut download dan rel pada spesifikasi HTML Living Standard.