Cara Membuat Hyperlink di HTML untuk Pemula Lengkap dengan Contoh Kode
Kalau kamu sering membuka website, pasti sadar bahwa hampir semua halaman
punya link yang bisa diklik. Nah, itulah yang disebut hyperlink. Fungsinya
simpel tapi penting banget, memindahkan kita dari satu halaman ke halaman lain
hanya dengan satu klik. Di HTML, hyperlink dibuat menggunakan tag
<a>
.
Kali ini saya akan membahas dasar-dasar hyperlink, bagaimana cara menulisnya, jenis-jenisnya, sampai tips agar penggunaannya lebih efektif.
Apa Itu Hyperlink?
Hyperlink atau tautan adalah jalan pintas yang menghubungkan satu halaman web dengan halaman lain. Biasanya tampil dalam teks biru bergaris bawah, tapi itu bisa kita ubah sesuka hati dengan CSS. Hyperlink nggak cuma buat teks, gambar, ikon, atau bahkan tombol juga bisa dijadikan link.
Struktur Dasar Hyperlink di HTML
Cara membuat hyperlink sebenarnya sederhana. HTML memakai tag
<a>
dengan atribut
href
untuk menentukan alamat
tujuan. Contoh sederhananya:
<a href="https://www.kodeceria.com">Website KodeCeria</a>
Tag <a>
menandakan bahwa
teks di dalamnya bisa diklik, sedangkan
href
berisi alamat tujuan.
Jadi, ketika orang mengklik “Website KodeCeria”, mereka langsung diarahkan ke
halaman tersebut.
Jenis-Jenis Hyperlink
Ada beberapa variasi penggunaan hyperlink di HTML:
-
Link Eksternal
Mengarah ke website lain.
<a href="https://google.com">Buka Google</a>
-
Link Internal
Menghubungkan halaman dalam satu situs.
<a href="about.html">Tentang Kami</a>
-
Anchor Link
Melompat ke bagian tertentu di halaman yang sama.
<a href="#kontak">Hubungi Kami</a>
-
Link pada Gambar
Gambar juga bisa jadi tautan.
<a href="index.html"><img src="logo.png" alt="Logo"></a>
Tips Menggunakan Hyperlink
Supaya hyperlink lebih enak dipakai, ada beberapa hal yang bisa diperhatikan:
Jangan pakai teks link generik kayak “klik di sini”. Lebih baik tulis yang jelas, misalnya “Baca Artikel Lengkap”.
-
Pastikan link tidak rusak (broken link), karena itu bisa bikin pengunjung kabur.
-
Kalau mengarahkan ke situs lain, biasanya lebih nyaman kalau dibuka di tab baru (
target="_blank"
). -
Bedakan tampilan link dengan teks biasa, entah lewat warna atau underline.
-
Gunakan link internal untuk membantu navigasi dan juga meningkatkan SEO.
Kesimpulan
Hyperlink bisa dibilang tulang punggung internet. Dengan memahami cara kerja dan penulisannya di HTML, kita bisa bikin website yang lebih mudah dijelajahi. Mulai dari link eksternal, internal, sampai anchor link dan link gambar semuanya punya peran masing-masing. Yang terpenting, gunakan tautan dengan bijak, jelas, dan konsisten supaya pengalaman pengunjung makin nyaman.
Posting Komentar