Pernahkah kamu mengklik teks atau gambar lalu tiba-tiba pindah ke halaman lain? Itulah yang disebut link (atau hyperlink). Link adalah jantung dari World Wide Web — tanpa link, internet hanya kumpulan halaman yang berdiri sendiri tanpa koneksi.
Apa Itu Tag Link <a>?
Tag <a> adalah singkatan dari anchor (jangkar). Fungsinya: membuat teks, gambar, atau elemen lain menjadi bisa diklik untuk berpindah ke halaman lain, bagian tertentu, atau membuka file.
Struktur Dasar Link
<a href="tujuan-link">Teks yang bisa diklik</a>
Contoh paling sederhana:
<a href="https://www.google.com">Klik di sini untuk ke Google</a>
Hasilnya:
(Tautan di atas hanya contoh, tidak benar-benar mengarah ke Google)
Tiga Atribut Wajib Kamu Tahu
Tag <a> memiliki banyak atribut, tapi tiga ini yang paling sering digunakan:
| Atribut | Fungsi | Contoh |
|---|---|---|
href |
Menentukan tujuan link (URL atau halaman) | href="https://google.com" |
target |
Menentukan di mana link akan dibuka | target="_blank" (tab baru) |
title |
Menampilkan tooltip saat mouse dihover | title="Buka Google" |
Atribut href - Kemana Link Akan Pergi?
href adalah atribut paling penting. Tanpanya, link tidak akan bekerja. Ada beberapa jenis nilai yang bisa diisi:
1. Link ke website lain (External Link)
<a href="https://www.youtube.com">Buka YouTube</a> <a href="https://www.instagram.com">Buka Instagram</a>
2. Link ke halaman dalam website sendiri (Internal Link)
<a href="tentang-saya.html">Halaman Tentang Saya</a> <a href="artikel/kontak.html">Hubungi Kami</a>
3. Link ke bagian tertentu dalam halaman (Anchor Link)
<a href="#kesimpulan">Langsung ke Kesimpulan</a> <h2 id="kesimpulan">Kesimpulan</h2>
4. Link untuk mengirim email
<a href="mailto:email@contoh.com">Kirim Email ke Saya</a>
5. Link untuk menelepon (khusus HP)
<a href="tel:+628123456789">Telepon Kami</a>
🪟 Atribut target - Buka di Mana?
Atribut target mengontrol di mana halaman tujuan akan dibuka. Nilai yang paling sering dipakai:
| Nilai target | Perilaku | Kapan Pakai? |
|---|---|---|
_self |
Buka di tab/window yang sama (DEFAULT) | Navigasi internal website |
_blank |
Buka di tab/window baru | Link ke website orang lain |
_parent |
Buka di frame induk | Jarang dipakai (kasus iframe) |
_top |
Buka di seluruh jendela (hapus frame) | Jarang dipakai |
target="_blank" agar pengunjung tidak meninggalkan websitemu. Untuk link internal (halamanmu sendiri), biarkan _self (default).
Atribut title - Tooltip Informasi
Atribut title menampilkan kotak kecil berisi teks saat mouse diarahkan ke link. Sangat berguna untuk memberi petunjuk tambahan.
<a href="https://www.google.com" title="Buka Google di tab baru" target="_blank">
Cari di Google
</a>
Coba arahkan mouse ke link di bawah ini:
Studi Kasus: Halaman dengan Berbagai Jenis Link
Buat file halaman-link.html dan praktikkan semua jenis link:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Membuat Link</title>
</head>
<body>
<h1>Daftar Link Belajar HTML</h1>
<!-- Link ke website luar (buka tab baru) -->
<p>
<a href="https://www.w3schools.com" target="_blank" title="Belajar HTML di W3Schools">
W3Schools (Website Belajar Terbaik)
</a>
</p>
<!-- Link ke halaman lain dalam website -->
<p>
<a href="tentang.html" title="Baca tentang penulis blog ini">
Tentang Penulis
</a>
</p>
<!-- Link ke bagian tertentu di halaman ini -->
<p>
<a href="#tips" title="Langsung ke bagian tips">
Lompat ke Tips Belajar
</a>
</p>
<!-- Link email -->
<p>
<a href="mailto:belajar@html.com" title="Kirim pesan ke saya">
Kirim Email
</a>
</p>
<!-- Link telepon -->
<p>
<a href="tel:+628123456789" title="Hubungi via WhatsApp">
Hubungi WhatsApp
</a>
</p>
<hr>
<h2 id="tips">Tips Belajar HTML</h2>
<p>1. Praktik setiap hari minimal 15 menit</p>
<p>2. Buat catatan sendiri</p>
<p>3. Jangan takut salah, coba terus!</p>
<p><a href="#">Kembali ke atas ↑</a></p>
</body>
</html>
Membuat Link dari Gambar
Kamu juga bisa membuat gambar menjadi link. Caranya: bungkus tag <img> dengan tag <a>.
<a href="https://www.google.com" target="_blank">
<img src="logo-google.jpg" alt="Logo Google" width="100">
</a>
Contoh (klik gambar di bawah ini — tapi karena ini hanya contoh, tidak akan ke mana-mana):
↑ Klik gambar di atas (contoh)
Link Khusus: # dan javascript:void(0)
Kadang kamu butuh link yang belum punya tujuan (misal tombol sementara). Dua trik umum:
href="#"→ Akan kembali ke atas halaman (agak mengganggu)href="javascript:void(0)"→ Tidak melakukan apa-apa, lebih aman
<a href="javascript:void(0)">Tombol Sementara (Belum Berfungsi)</a>
href="#" atau javascript:void(0) tidak disarankan untuk navigasi utama karena mesin pencari bingung. Gunakan hanya untuk link sementara atau tombol yang akan diisi JavaScript nanti.
Kesalahan Umum Pemula
- Lupa menulis
http://atauhttps://→href="google.com"akan dianggap sebagai file lokal, bukan website Google. - Lupa menutup tag
</a>→ Seluruh halaman setelahnya jadi link semua! - Spasi di dalam
href→href=" https://google.com "(tidak akan berfungsi) - Target
_blanktanpa keamanan → Bisa menimbulkan celah keamanan kecil (tapi untuk pemula tidak perlu khawatir dulu)
Latihan Singkat
- Buat file HTML baru dengan judul "Koleksi Website Favoritku"
- Buat daftar minimal 5 website favoritmu (YouTube, Instagram, dll)
- Setiap link harus:
- Menggunakan
target="_blank"(buka di tab baru) - Memiliki atribut
titledengan deskripsi singkat
- Menggunakan
- Tambahkan link "Kembali ke atas" di bagian bawah halaman
- Tambahkan satu link gambar (misal logo website favoritmu)
- Simpan dan buka di browser, coba klik semua link
Intisari Hari Ini
- Tag
<a href="...">untuk membuat link href= tujuan link (URL, halaman internal, anchor, email, telpon)target="_blank"= buka di tab baru (untuk link ke website lain)title= tooltip saat mouse dihover- Bisa membuat link dari teks, gambar, atau elemen lain
target="_blank" untuk semua link dan tambahkan title yang informatif. Bagikan ke teman-temanmu!
Artikel Sebelumnya: HTML Dasar #5 - Komentar di HTML: Untuk Catatan dan Debugging
Artikel Selanjutnya: HTML Dasar #7 - Menambahkan Gambar (img) dengan src, alt, width, height