Link Lanjutan: Email, Telepon, Anchor

Analogi: Pintu-Pintu Khusus di Dalam Rumah

Bayangkan sebuah rumah. Pintu utama membawamu ke ruangan lain, itu seperti link biasa yang membawamu ke halaman web lain. Tapi di dalam rumah ada juga pintu-pintu khusus: gagang telepon di dinding yang langsung menghubungkanmu ke seseorang, kotak surat yang langsung mengirim suratmu, dan tangga dalam rumah yang membawamu ke lantai atas tanpa harus keluar rumah dulu.

Link lanjutan bekerja persis seperti itu. Nilai href ternyata tidak harus berupa alamat halaman web. Dengan awalan khusus seperti mailto:, tel:, atau tanda pagar #, satu klik bisa memicu aksi yang berbeda-beda: membuka aplikasi email, membuka aplikasi telepon di HP, mengunduh file, atau melompat ke bagian lain di halaman yang sama. Semua ini murni HTML, tanpa sebaris pun JavaScript.

Kenapa Konsep Ini Ada

Dulu semua link hanya bisa menuju halaman web, dan itu menimbulkan tiga masalah nyata yang pasti pernah kamu rasakan sebagai pengguna.

Pertama, soal menelepon dari HP. Tombol "Hubungi Kami" yang hanya membuka halaman berisi nomor telepon memaksa pengunjung menyalin nomor, membuka aplikasi telepon, lalu menempelkannya secara manual. Ribet sekali. Skema tel: memecahkan ini: satu ketuk, aplikasi telepon langsung terbuka dengan nomor sudah terisi. Di situs usaha kecil seperti warkop atau bengkel, perbedaan kecil ini bisa menjadi penentu apakah pengunjung jadi pelanggan atau malah pergi.

Kedua, soal file unduhan. Tanpa atribut download, mengklik link PDF biasanya malah membuka file itu di tab browser. Banyak pengguna awam bingung: filenya tersimpan di mana? Atribut download memberi perintah tegas ke browser, "jangan dibuka, langsung simpan ke perangkat," dan kamu bahkan bisa menentukan sendiri nama file hasil simpanannya.

Ketiga, soal halaman yang sangat panjang. Artikel tutorial atau halaman profil perusahaan bisa sepanjang lima layar. Meminta pembaca scroll manual sampai bawah itu melelahkan. Anchor (#nama-id) memecahkan ini dengan membuat "daftar isi" yang bisa diklik, persis seperti daftar isi di buku pelajaran.

Contoh 1: Email dan Telepon, Sesederhana Ini

<p>Punya pertanyaan? <a href="mailto:[email protected]">Kirim email ke kami</a></p>
<p>Atau langsung <a href="tel:+6281234567890">telepon 0812-3456-7890</a></p>

Klik link pertama membuka aplikasi email dengan kolom tujuan sudah terisi [email protected], tinggal ketik pesannya. Klik link kedua di HP membuka dialer dengan nomor siap dipanggil. Perhatikan format nomor di href: diawali +62 (kode negara Indonesia), tanpa angka 0 di depan, tanpa spasi, tanpa strip. Teks yang tampil ke pengguna boleh ditulis sebebas apa pun ("telepon 0812-3456-7890"), yang penting nilai di href mengikuti format mesin.

Contoh 2: Daftar Isi Satu Halaman dan Tombol Unduh

Sekarang contoh yang lebih realistis: halaman profil warkop satu halaman dengan navigasi lompat antar bagian plus tombol unduh menu.

<nav>
  <a href="#tentang">Tentang</a> |
  <a href="#menu">Menu</a> |
  <a href="#lokasi">Lokasi</a>
</nav>

<section id="tentang">
  <h2>Tentang Kami</h2>
  <p>Warkop buka sejak 2019...</p>
</section>

<section id="menu">
  <h2>Menu</h2>
  <p><a href="menu-lengkap.pdf" download="Menu-Warkop-2026.pdf">
    Unduh menu lengkap (PDF)
  </a></p>
</section>

<section id="lokasi">
  <h2>Lokasi</h2>
  <p><a href="#tentang">Kembali ke atas</a></p>
</section>

Pola href="#tentang" selalu dipasangkan dengan id="tentang" pada elemen tujuan. Begitu diklik, browser scroll otomatis ke elemen itu. Ini adalah fondasi semua daftar isi artikel dan tombol "kembali ke atas" yang kamu lihat di website profesional. Pada link unduh, nilai download="Menu-Warkop-2026.pdf" menentukan nama file yang tersimpan di perangkat pengguna, jadi tidak lagi bernama acak seperti menu-lengkap.pdf.

Kesalahan Umum Pemula

1. Nomor telepon ditulis seperti cara manusia membaca, bukan cara mesin membaca.

Salah:

<a href="tel:0812-3456-7890">Telepon kami</a>

Benar:

<a href="tel:+6281234567890">Telepon kami</a>

Strip dan spasi bisa membuat dialer di sebagian HP gagal mengenali nomor, dan angka 0 di depan harus diganti kode negara +62. Prinsipnya: href ditulis untuk mesin (format ketat), sedangkan teks link ditulis untuk manusia (boleh cantik).

2. Anchor menunjuk ke id yang tidak ada atau salah ketik.

Salah:

<a href="#menu">Lihat menu</a>
<!-- jauh di bawah -->
<section id="Menu">...</section>

Benar:

<a href="#menu">Lihat menu</a>
<!-- jauh di bawah -->
<section id="menu">...</section>

Nilai id bersifat case-sensitive: Menu dan menu dianggap dua hal berbeda. Kalau tidak cocok persis, klik tidak menghasilkan apa-apa dan tidak ada pesan error, sehingga kesalahan ini sering tidak disadari selama berbulan-bulan.

3. Berharap download bekerja untuk file milik website lain.

Salah (browser akan mengabaikan atributnya):

<a href="https://situs-lain.com/laporan.pdf" download>Unduh laporan</a>

Benar: atribut download hanya dihormati browser untuk file yang satu domain dengan halamanmu. Untuk file milik orang lain, hapus atributnya dan biarkan browser membukanya secara normal, atau simpan salinan file itu di servermu sendiri.

Catatan teknis: Skema mailto: juga bisa membawa subjek dan isi awal lewat parameter URL, contohnya mailto:[email protected]?subject=Pesanan&body=Halo (spasi ditulis %20). Jangan pernah menaruh informasi sensitif di link seperti ini karena isinya terlihat jelas oleh siapa pun yang membuka kode sumber halamanmu.