Email dan Telepon Links

Tidak semua link mengarah ke halaman web. Skema mailto: membuka aplikasi email dengan alamat tujuan yang terisi, sedangkan skema tel: membuka aplikasi telepon. Keduanya mengubah deretan kontak statis menjadi tindakan satu klik, dan keduanya ditulis pada atribut href yang sama seperti link biasa. Pada Chapter ini kita menulis link mailto lengkap dengan subject dan body, memakai format internasional untuk tel, serta mempertimbangkan perilakunya di desktop dan ponsel.

Skema mailto #

Nilai href yang diawali mailto: menunjuk alamat email, bukan halaman. Saat pengunjung mengeklik link, browser menyerahkan penanganannya ke aplikasi email bawaan: jendela tulis pesan baru terbuka dengan kolom tujuan terisi alamat tersebut.

<a href="mailto:[email protected]">Email Budi</a>

Perhatikan pembagian perannya: href menyimpan alamat yang dieksekusi browser, sedangkan teks link tetap kita tulis sebagai alamat yang terbaca manusia. Keduanya serupa isinya, tetapi berbeda tugas — teks link inilah yang dibaca pengunjung dan screen reader.

Menambahkan Subject dan Body #

Alamat tujuan dapat dilengkapi parameter setelah tanda ?. Parameter subject mengisi judul pesan, sedangkan body mengisi teks awal pesan. Spasi tidak boleh ditulis mentah di dalam URL, sehingga kita ganti dengan %20 — bentuk terenkode dari karakter spasi:

<a href="mailto:[email protected]?subject=Konsultasi%20Desain&body=Halo%20Budi%2C%20saya%20ingin%20bertanya">
  Konsultasi desain lewat email
</a>

Output yang Dihasilkan:

Aplikasi email terbuka dengan:
  - Kolom tujuan terisi [email protected]
  - Kolom judul terisi "Konsultasi Desain"
  - Kolom isi terisi "Halo Budi, saya ingin bertanya"

Bila satu URL memuat lebih dari satu parameter, urutan antarparameter dipisahkan tanda &. Di dalam atribut HTML, tanda itu sebaiknya dituliskan sebagai & agar tidak tertukar dengan awalan entitas karakter. Nilai %2C pada contoh adalah bentuk terenkode dari tanda koma; seluruh aturan pengodean ini diatur oleh standar URL yang sama dengan materi Chapter Absolute dan Relative URL.

Skema tel #

Nilai href yang diawali tel: menunjuk nomor telepon. Format yang aman adalah format internasional: diawali tanda +, diikuti kode negara, lalu nomor tanpa spasi:

<a href="tel:+6281234567890">+62 812-3456-7890</a>

Teks link boleh memakai format lokal yang lazim dibaca manusia, misalnya +62 812-3456-7890, karena yang dieksekusi browser adalah nilai href. Dua penulisan menunjuk nomor yang sama: +6281234567890 pada href, dan teks berformat di antara tag.

Perilaku di Desktop dan Ponsel #

Perilaku klik pada kedua skema bergantung pada perangkat yang dipakai pengunjung:

Di ponsel, tel: hampir selalu bekerja karena aplikasi telepon menjadi bagian bawaan perangkat. Di desktop, mailto: yang lebih dapat diandalkan, sedangkan tel: baru berfungsi bila ada aplikasi panggilan. Pertimbangkan konteks pengunjung saat menata halaman kontak: bisnis yang dilayani lewat telepon sebaiknya menonjolkan tel: di versi ponsel, dan alamat email yang jelas di semua perangkat.

Contoh Halaman Kontak #

File berikut menyatukan seluruh pola di atas menjadi halaman kontak toko:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontak Toko Budi</title>
</head>
<body>
  <h1>Kontak Toko Budi</h1>
  <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
  <p>
    <a href="mailto:[email protected]?subject=Konsultasi%20Desain&amp;body=Halo%20Budi%2C%20saya%20ingin%20bertanya">
      Konsultasi desain lewat email
    </a>
  </p>
  <p>Telepon (Siti): <a href="tel:+6281234567890">+62 812-3456-7890</a></p>
  <p>Alamat: Jl. Melati No. 10, Bandung.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Kontak Toko Budi"
  - Link email polos, link email dengan subject dan body, serta link
    telepon berformat internasional
  - Alamat sebagai teks biasa yang dapat disalin

Mari kita telaah keputusannya:

1. Baris 10 (email polos): href berisi mailto:[email protected] dan teks link menampilkan alamat yang sama, sehingga alamat tetap terbaca bila aplikasi email tidak ada.
2. Baris 11-14 (email berparameter): subject dan body mempersiapkan isi pesan; tanda & pada atribut menuliskan karakter pemisah parameter dengan aman.
3. Baris 15 (telepon): tel:+6281234567890 memakai format internasional tanpa spasi, sementara teks link menampilkan format bertanda hubung yang terbaca manusia.
4. Baris 16 (alamat): informasi yang tidak memiliki skema khusus ditampilkan sebagai teks biasa.

Dengan mailto dan tel, seluruh jenis tujuan link yang lazim telah kita kuasai. Chapter terakhir pada section ini menyempurnakan sisi yang menentukan mutu semuanya: aksesibilitas teks link dan atribut-atributnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen a
• MDN Web Docs — Creating links
• WHATWG — HTML Living Standard: Following hyperlinks

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontak Toko Budi</title>
</head>
<body>
  <h1>Kontak Toko Budi</h1>
  <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
  <p>
    <a href="mailto:[email protected]?subject=Konsultasi%20Desain&amp;body=Halo%20Budi%2C%20saya%20ingin%20bertanya">
      Konsultasi desain lewat email
    </a>
  </p>
  <p>Telepon (Siti): <a href="tel:+6281234567890">+62 812-3456-7890</a></p>
  <p>Alamat: Jl. Melati No. 10, Bandung.</p>
</body>
</html>