Hyperlink, atau tautan, adalah tulang punggung dari World Wide Web. Tanpa hyperlink, internet hanyalah sekumpulan dokumen statis yang terisolasi. Memahami bagaimana cara membuat hyperlink bukan hanya soal kemampuan teknis, tetapi juga soal membuat navigasi yang intuitif bagi pengguna. Dalam konteks HTML, hyperlink dibuat menggunakan tag jangkar, yaitu tag <a>.
Tag <a> (anchor) digunakan untuk mendefinisikan tautan. Atribut paling krusial yang harus Anda gunakan adalah href (Hypertext Reference). Atribut ini menentukan alamat tujuan tautan tersebut.
Ini adalah jenis tautan yang paling umum, mengarahkan pengguna ke situs web lain di luar domain Anda. Penting untuk selalu menyertakan skema protokol (http:// atau https://).
<a href="https://www.google.com">Kunjungi Google</a>Jika Anda ingin tautan tersebut terbuka di tab browser baru (praktik baik untuk tautan eksternal), tambahkan atribut target="_blank":
<a href="https://www.wikipedia.org" target="_blank">Buka Wikipedia di Tab Baru</a>Saat menautkan antar halaman dalam situs web yang sama, Anda cukup menggunakan jalur relatif atau jalur absolut ke file target. Jika file tujuan berada di folder yang sama, cukup gunakan nama filenya.
<a href="tentang-kami.html">Baca Tentang Kami</a>Terkadang, Anda perlu mengarahkan pengguna langsung ke bagian spesifik dalam halaman yang sama, misalnya ke subjudul di artikel yang sangat panjang. Ini disebut anchor link.
Langkah pertama adalah memberi identitas pada elemen tujuan menggunakan atribut id:
<h2 id="bagian-penting">Bagian Penting Artikel</h2>Kemudian, buat hyperlink yang menunjuk ke ID tersebut menggunakan tanda pagar (#) diikuti dengan nama ID:
<a href="#bagian-penting">Lompat ke Bagian Penting</a>HTML5 mempermudah pembuatan tautan yang memicu aplikasi bawaan perangkat, sangat berguna untuk desain responsif mobile.
Menggunakan skema mailto: akan membuka aplikasi email default pengguna:
<a href="mailto:[email protected]">Kirim Email kepada Kami</a>Anda bahkan bisa mengisi subjek atau badan email secara otomatis:
<a href="mailto:[email protected]?subject=Pertanyaan&body=Halo,">Hubungi Dukungan</a>Menggunakan skema tel: memungkinkan pengguna seluler langsung melakukan panggilan:
<a href="tel:+6281234567890">Telepon Kami Sekarang</a>Ini adalah fitur vital dalam mobile web karena mengurangi gesekan pengguna saat ingin menghubungi bisnis.
Kunci dari hyperlink yang baik adalah keterbacaan teks tautannya. Hindari menggunakan teks generik seperti "Klik di sini" atau "Baca lebih lanjut" jika memungkinkan. Teks tautan harus deskriptif tentang apa yang akan didapatkan pengguna setelah mengklik.
Contoh Buruk:
Silakan baca dokumentasi di sini.Contoh Baik:
Baca dokumentasi lengkap mengenai sintaks HTML5.Ketika tag <a> tidak memiliki teks tautan (hanya berisi gambar, misalnya), penting untuk selalu menyertakan atribut alt pada elemen di dalamnya untuk tujuan aksesibilitas dan SEO.
Dengan menguasai cara membuat hyperlink yang benar—baik itu ke sumber eksternal, bagian internal, atau memicu komunikasi langsung—Anda memastikan struktur navigasi situs web Anda kuat, mudah diakses, dan ramah bagi semua jenis perangkat, terutama mobile.