Belajar HTML #07: Panduan Lengkap Membuat Link HTML: Dari Dasar hingga Implementasi

Apa Itu Link di HTML?

Link (atau hyperlink) adalah elemen HTML yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain hanya dengan sekali klik. Link inilah yang membentuk jaringan antarhalaman dan menjadikan web sebagai "web" — sebuah jaring informasi yang saling terhubung.

Di HTML, link dibuat menggunakan tag <a> (singkatan dari anchor) dengan atribut href yang berisi alamat URL tujuan. Selain menghubungkan halaman, link juga bisa digunakan untuk menuju bagian tertentu di halaman yang sama, mengunduh file, membuka email, dan menjalankan fungsi JavaScript.

Cara Membuat Link di HTML

Link dibuat dengan tag <a> yang wajib memiliki atribut href (hypertext reference). Atribut ini menentukan ke mana pengguna akan diarahkan saat link diklik.

Berikut sintaks dasarnya:

<a href="URL_TUJUAN">Teks Link</a>

Contoh penggunaan dalam dokumen HTML:

<p>
  Untuk informasi lebih lanjut, silakan buka
  <a href="about.html">halaman About</a>.
</p>

Secara default, browser menampilkan link dengan warna biru dan bergaris bawah. Saat link sudah pernah diklik, warnanya berubah menjadi ungu. Tampilan ini bisa diubah menggunakan CSS.

Catatan: Pastikan file tujuan (misalnya about.html) sudah ada. Jika belum, browser akan menampilkan error 404 (halaman tidak ditemukan).

lihat foto

Internal Link vs External Link

Berdasarkan tujuannya, link di HTML dibagi menjadi dua jenis utama:

Internal Link

Internal link adalah link yang mengarah ke halaman lain dalam website yang sama. URL-nya cukup ditulis dengan nama file atau path relatif, tanpa perlu menyertakan nama domain lengkap.

<!-- Navigasi internal sederhana -->
<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="contact.html">Contact</a>
</nav>

Internal link bisa bekerja karena semua file berada dalam satu folder atau satu domain. Browser secara otomatis menambahkan alamat domain di depan nama file.

External Link

External link adalah link yang mengarah ke website atau domain lain. URL-nya harus ditulis lengkap, termasuk protokol (https://).

<!-- Link ke website lain -->
<a href="https://www.google.com">Buka Google</a>

<!-- Link WhatsApp dengan pesan otomatis -->
<a href="https://api.whatsapp.com/send?phone=6281234567890&text=Halo">Chat WhatsApp</a>

Tips keamanan: Saat membuat external link, tambahkan atribut rel="noopener noreferrer" dan target="_blank" untuk mencegah potensi kerentanan keamanan:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  Buka Google di tab baru
</a>

lihat foto

Atribut Penting pada Tag Link

Selain href, tag <a> mendukung beberapa atribut lain yang memengaruhi perilaku dan tampilan link.

Atribut target

Atribut target menentukan di mana halaman tujuan dibuka. Berikut nilai yang sering digunakan:

• _self — membuka link di tab yang sama (default).
• _blank — membuka link di tab atau jendela baru.
• _top — membuka link di level paling atas, mengganti seluruh frame.
• _parent — membuka link di frame induk.
• "nama-frame" — membuka link di dalam elemen <iframe> tertentu.

Contoh membuka link di tab baru:

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Buka MDN Web Docs
</a>

Atribut title

Atribut title menampilkan tooltip — teks informasi tambahan yang muncul saat kursor diarahkan ke link. Atribut ini juga membantu aksesibilitas karena dibaca oleh screen reader.

<a href="about.html" title="Informasi tentang perusahaan kami">
  Tentang Kami
</a>

Atribut rel

Atribut rel mendefinisikan hubungan antara halaman saat ini dengan halaman tujuan. Beberapa nilai yang umum digunakan:

• nofollow — memberitahu mesin pencari agar tidak mengikuti link tersebut. Berguna untuk link iklan atau konten yang tidak ingin kamu endorse.
• noopener — mencegah halaman tujuan mengakses objek window.opener. Penting untuk keamanan pada target="_blank".
• noreferrer — mencegah browser mengirimkan informasi referrer ke halaman tujuan.

<!-- Link iklan — tidak diikuti Google -->
<a href="https://contoh-iklan.com" rel="nofollow">Sponsor Kami</a>

<!-- Link aman ke tab baru -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a>

Cara Mengubah Warna Link dengan CSS

Tampilan default link (biru bergaris bawah) bisa diubah sepenuhnya menggunakan CSS. Kamu bisa mengubah warna teks, latar belakang, dan bahkan menghilangkan garis bawah.

<!-- Inline CSS -->
<a href="index.html" style="color: #E74C3C; text-decoration: none;">Home</a>
<a href="about.html" style="color: white; background-color: #3498DB; padding: 5px 10px;">About</a>

Untuk proyek yang lebih besar, sebaiknya gunakan CSS terpisah agar kode lebih rapi dan mudah dikelola:

/* Style link di file CSS terpisah */
a {
  color: #2980B9;
  text-decoration: none;
}

a:hover {
  color: #E74C3C;
  text-decoration: underline;
}

Properti a:hover di atas akan mengubah warna link menjadi merah saat kursor diarahkan — ini memberikan feedback visual yang baik kepada pengguna.

Jenis-Jenis Link Khusus di HTML

Selain menghubungkan halaman, tag <a> mendukung beberapa fungsi khusus yang sangat berguna dalam pengembangan web.

Anchor Link (Link ke Bagian Tertentu)

Anchor link memungkinkan kamu membuat link yang menuju ke elemen tertentu di dalam halaman yang sama. Caranya, isi atribut href dengan tanda pagar (#) diikuti nilai id dari elemen tujuan.

<!-- Link anchor -->
<a href="#kesimpulan">Langsung ke Kesimpulan</a>

<!-- Banyak konten di antara... -->

<!-- Elemen tujuan -->
<h2 id="kesimpulan">Kesimpulan</h2>
<p>Ini adalah bagian kesimpulan artikel.</p>

Anchor link sangat berguna untuk membuat daftar isi interaktif pada artikel panjang. Browser juga menyediakan anchor bawaan #top yang otomatis mengarahkan pengguna ke bagian paling atas halaman:

<a href="#top">Kembali ke Atas</a>

Link Placeholder (Link Buntu)

Link placeholder adalah link yang tidak mengarah ke mana pun. Biasanya digunakan saat proses pengembangan sebagai penanda sementara sebelum URL tujuan ditentukan.

<a href="#">Link belum aktif</a>
<a href="#!">Link placeholder lainnya</a>

Link dengan Gambar

Gambar juga bisa dijadikan link — cukup bungkus tag <img> di dalam tag <a>. Seluruh area gambar akan menjadi area yang bisa diklik.

<a href="index.html">
  <img src="logo.png" alt="Logo Website - Kembali ke Beranda" />
</a>

Tips aksesibilitas: Selalu tambahkan atribut alt yang deskriptif pada gambar yang dijadikan link, agar screen reader bisa membacakan tujuan link tersebut.

lihat foto

Link untuk Download File

Link bisa digunakan untuk mengunduh file dengan mengarahkan href ke lokasi file. Tambahkan atribut download agar browser langsung mengunduh, bukan membuka file tersebut.

<!-- Download file di folder yang sama -->
<a href="dokumen.pdf" download>Unduh Dokumen PDF</a>

<!-- Download dengan nama file kustom -->
<a href="laporan-q1-2026.xlsx" download="Laporan-Kuartal-1.xlsx">
  Unduh Laporan Q1
</a>

Link untuk Mengirim Email

Protokol mailto: pada atribut href akan membuka aplikasi email default pengguna dengan alamat penerima yang sudah terisi otomatis.

<a href="mailto:admin@contoh.com">Kirim Email ke Admin</a>

<!-- Dengan subject dan body otomatis -->
<a href="mailto:admin@contoh.com?subject=Pertanyaan&body=Halo,%20saya%20ingin%20bertanya...">
  Email dengan Subject Otomatis
</a>

Link untuk Menelepon

Protokol tel: berguna untuk website yang diakses melalui perangkat mobile. Saat link diklik, perangkat akan membuka aplikasi telepon.

<a href="tel:+6281234567890">Hubungi Kami: 0812-3456-7890</a>

Praktik Terbaik Membuat Link HTML

Agar link yang kamu buat efektif, ramah mesin pencari, dan aksesibel, perhatikan beberapa praktik terbaik berikut:

• Gunakan anchor text yang deskriptif — hindari teks generik seperti "klik di sini". Contoh yang baik: "baca panduan lengkap HTML" lebih bermakna untuk SEO dan pembaca.
• Tambahkan rel="noopener noreferrer" pada setiap external link dengan target="_blank" untuk alasan keamanan.
• Gunakan rel="nofollow" pada link iklan, afiliasi, atau konten buatan pengguna (UGC).
• Pastikan link bisa diakses keyboard — tag <a> secara default sudah mendukung navigasi keyboard (Tab dan Enter).
• Hindari link buntu di website live — href="#" hanya cocok untuk tahap pengembangan.
• Tambahkan atribut title jika teks link saja belum cukup menjelaskan tujuannya.

Kesimpulan

Link adalah elemen fundamental dalam HTML yang menghubungkan halaman-halaman web menjadi satu kesatuan. Dengan tag <a> dan atribut href, kamu bisa membuat navigasi antarhalaman, mengarahkan pengguna ke website lain, mengunduh file, mengirim email, bahkan menelepon langsung dari browser.

Rangkuman penting:

• Gunakan tag <a href="..."> untuk membuat link.
• Internal link menggunakan path relatif, external link menggunakan URL lengkap.
• Atribut target="_blank" membuka link di tab baru — selalu pasangkan dengan rel="noopener noreferrer".
• Manfaatkan anchor link (#id) untuk navigasi di dalam halaman.
• Protokol mailto: untuk email, tel: untuk telepon, dan atribut download untuk unduh file.
• Tulis anchor text yang deskriptif untuk SEO dan aksesibilitas yang lebih baik.