Hyperlink HTML: Fungsi Tag a dan Cara Membuat Link ke Halaman Lain
Hyperlink HTML adalah mekanisme yang membuat satu halaman bisa terhubung dengan halaman lain melalui klik. Inilah yang membuat web disebut “web” atau jaringan. Tanpa hyperlink, halaman hanya berdiri sendiri tanpa koneksi. Di HTML, tautan dibuat menggunakan tag <a> yang disebut anchor tag. Di materi ini kita bahas dari paling dasar: arti tag a, struktur atributnya, jenis link, lalu praktik dan studi kasus supaya langsung bisa dipakai.
Apa Itu Hyperlink HTML dan Kenapa Penting
Hyperlink HTML adalah elemen yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain, baik di dalam satu website maupun ke situs luar. Setiap menu navigasi, tombol “baca selengkapnya”, dan link referensi menggunakan mekanisme ini.
Fungsi utama hyperlink:
- navigasi antar halaman
- menghubungkan referensi
- membangun struktur situs
- membantu SEO melalui internal link
- meningkatkan pengalaman pengguna
Tanpa struktur tautan, halaman sulit dijelajahi.
Tag a (Anchor) sebagai Dasar Hyperlink HTML
Hyperlink HTML dibuat dengan tag <a>. Huruf “a” berarti anchor, yaitu penanda titik tautan.
Struktur paling dasar:
<a href="https://example.com">Kunjungi situs</a>
Bagian pentingnya:
<a>= tag linkhref= alamat tujuan- teks di tengah = teks yang bisa diklik
Tanpa atribut href, tag a tidak berfungsi sebagai tautan.
Arti Atribut href pada Hyperlink HTML
href adalah singkatan dari hypertext reference. Isinya adalah alamat tujuan link.
Contoh ke halaman luar:
<a href="https://developer.mozilla.org">MDN</a>
Contoh ke halaman dalam situs:
<a href="/heading-html">Materi Heading</a>
Browser akan membuka alamat yang ditentukan di href saat link diklik.
Hyperlink HTML ke Halaman Internal
Tautan internal mengarah ke halaman lain dalam website yang sama. Ini penting untuk struktur navigasi dan SEO internal linking.
Contoh:
<a href="/paragraf-html">Belajar Paragraf</a> <a href="/list-html">Materi List</a>
Internal link membantu mesin pencari memahami hubungan antar halaman.
Hyperlink HTML ke Situs Eksternal
Tautan eksternal mengarah ke domain lain. Biasanya dipakai untuk referensi sumber.
Contoh:
<a href="https://www.w3.org">Standar Web</a>
Untuk link luar, praktik umum adalah membuka di tab baru.
Membuka Link di Tab Baru dengan target
Gunakan atribut target agar tautan terbuka di tab baru.
<a href="https://developer.mozilla.org" target="_blank"> Referensi HTML </a>
Biasanya ditambah rel untuk keamanan:
<a href="https://developer.mozilla.org" target="_blank" rel="noopener"> Referensi HTML </a>
Hyperlink HTML ke Bagian Halaman yang Sama
Link tidak selalu pindah halaman. Bisa juga lompat ke bagian tertentu di halaman yang sama menggunakan id.
Buat target:
<h2 id="latihan">Bagian Latihan</h2>
Buat link:
<a href="#latihan">Loncat ke latihan</a>
Ini disebut anchor link atau jump link.
Hyperlink HTML pada Gambar
Tautan tidak harus teks. Gambar juga bisa dijadikan link dengan membungkus img di dalam tag a.
<a href="/produk"> <img src="produk.jpg" alt="Produk"> </a>
Saat gambar diklik, browser mengikuti link-nya.
Hyperlink HTML untuk Email dan Telepon
Anchor tag juga bisa dipakai untuk aksi khusus.
Link email:
<a href="mailto:admin@contoh.com">Kirim Email</a>
Link telepon:
<a href="tel:+628123456789">Telepon</a>
Berguna untuk halaman kontak di perangkat mobile.
Perbedaan Absolute dan Relative Link
Dalam praktik hyperlink HTML ada dua bentuk alamat.
Absolute URL (lengkap):
<a href="https://contoh.com/produk">Produk</a>
Relative URL (relatif terhadap domain):
<a href="/produk">Produk</a>
Untuk link internal, relative lebih umum dipakai.
Praktik Langsung: Membuat Halaman Navigasi Sederhana
Coba praktik membuat menu tautan sederhana.
<!DOCTYPE html> <html> <head> <title>Latihan Link</title> </head> <body> <h2>Navigasi</h2> <ul> <li><a href="/index.html">Home</a></li> <li><a href="/materi.html">Materi</a></li> <li><a href="https://developer.mozilla.org" target="_blank" rel="noopener">Referensi</a></li> </ul> </body> </html>
Buka dan klik tiap link untuk melihat perilakunya.
Studi Kasus: Mengubah Teks Referensi Jadi Tautan Aktif
Teks biasa:
Baca dokumentasi di developer.mozilla.org
Versi tautan:
Baca dokumentasi di <a href="https://developer.mozilla.org">MDN</a>
Sekarang bisa diklik dan diikuti.
Kesalahan Umum Saat Membuat Hyperlink
Kesalahan yang sering terjadi:
- lupa href
- salah menulis alamat
- pakai teks “klik di sini” (kurang deskriptif untuk SEO)
- tidak membedakan internal dan eksternal
- membuka semua link di tab baru tanpa alasan
Gunakan teks link yang menjelaskan tujuan.
Contoh lebih baik:
<a href="/list-html">pelajari struktur daftar HTML</a>
Referensi Teknis Anchor Tag
Dokumentasi teknis anchor tag tersedia di MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/HTML sebagai rujukan lanjutan.
Lanjutan Seri HTML Dasar
Setelah memahami hyperlink HTML dan anchor tag, materi berikutnya membahas cara menampilkan gambar dengan tag img, atribut src, dan alt text. Pastikan juga kamu sudah memahami <a href=”/list-html”>struktur daftar</a> dan <a href=”/heading-html”>hierarki heading</a> agar navigasi halamanmu rapi dan saling terhubung. Berikutnya kita masuk ke image HTML secara praktik
