Hyperlink & Target

Hyperlink & Target 🔗

Hyperlink adalah jantung dari internet — tanpa link, tidak ada yang namanya "berselancar" di web. Setiap kali mengklik sesuatu dan berpindah ke halaman lain, itulah hyperlink bekerja.

Struktur Dasar

Tag untuk membuat hyperlink adalah <a> (anchor). Atribut wajibnya adalah href (hypertext reference) yang berisi tujuan link:

<a href="https://www.google.com">Kunjungi Google</a>

Anatominya:

<a href="https://www.google.com">Kunjungi Google</a>
 ↑       ↑                        ↑
Tag    Tujuan link              Teks yang diklik
anchor

Secara default browser menampilkan link dengan:

• Warna biru
• Garis bawah
• Kursor berubah menjadi pointer saat diarahkan

Jenis-Jenis URL pada href

1. URL Absolut — Alamat lengkap dengan protokol:

<a href="https://www.wikipedia.org">Wikipedia</a>
<a href="https://www.youtube.com">YouTube</a>
<a href="http://example.com">Contoh HTTP</a>

Digunakan untuk menuju ke website lain di luar halaman kita.

2. URL Relatif — Alamat file di dalam proyek sendiri:

<!-- File di folder yang sama -->
<a href="tentang.html">Tentang Kami</a>

<!-- File di folder berbeda -->
<a href="halaman/kontak.html">Kontak</a>

<!-- Naik satu level folder -->
<a href="../index.html">Kembali ke Beranda</a>

<!-- File gambar -->
<a href="assets/dokumen.pdf">Unduh PDF</a>

Digunakan untuk navigasi antar halaman di dalam proyek yang sama.

3. Anchor Link — Menuju bagian tertentu di halaman:

<!-- Link menuju section dengan id tertentu -->
<a href="#tentang">Tentang Kami</a>
<a href="#layanan">Layanan</a>
<a href="#kontak">Kontak</a>

<!-- Target yang dituju — harus punya id yang sama -->
<section id="tentang">
  <h2>Tentang Kami</h2>
  ...
</section>

<section id="layanan">
  <h2>Layanan</h2>
  ...
</section>

Sering digunakan untuk navigasi one-page website atau tombol "Kembali ke Atas".

4. Link Email — Membuka aplikasi email:

<a href="mailto:[email protected]">Kirim Email</a>

<!-- Dengan subject dan body yang sudah diisi -->
<a href="mailto:[email protected]?subject=Pertanyaan&body=Halo, saya ingin bertanya...">
  Kirim Email dengan Subject
</a>

5. Link Telepon — Membuka aplikasi telepon (berguna di mobile):

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

6. Link WhatsApp:

<a href="https://wa.me/6281234567890">Chat via WhatsApp</a>

<!-- Dengan pesan yang sudah disiapkan -->
<a href="https://wa.me/6281234567890?text=Halo, saya ingin bertanya tentang produk Anda">
  Chat WhatsApp
</a>

Atribut target — Cara Membuka Link

Atribut target menentukan di mana link akan dibuka:

<!-- _self — buka di tab/jendela yang sama (DEFAULT) -->
<a href="https://google.com" target="_self">Buka di sini</a>

<!-- _blank — buka di tab baru -->
<a href="https://google.com" target="_blank">Buka di Tab Baru</a>

<!-- _parent — buka di frame induk -->
<a href="https://google.com" target="_parent">Buka di Parent</a>

<!-- _top — buka di jendela penuh, keluar dari semua frame -->
<a href="https://google.com" target="_top">Buka di Top</a>

Yang paling sering digunakan dalam praktik:

target="_blank" dan Keamanan

Saat menggunakan target="_blank", wajib menambahkan atribut rel="noopener noreferrer" untuk keamanan:

<!-- KURANG AMAN — tanpa rel -->
<a href="https://website-lain.com" target="_blank">Kunjungi</a>

<!-- AMAN — dengan rel -->
<a href="https://website-lain.com" target="_blank" rel="noopener noreferrer">
  Kunjungi
</a>

Tanpa rel="noopener noreferrer", halaman yang dibuka di tab baru bisa mengakses dan memanipulasi halaman asli melalui JavaScript — ini adalah celah keamanan yang dikenal sebagai reverse tabnapping.

• noopener — mencegah tab baru mengakses halaman asal
• noreferrer — mencegah informasi referrer dikirimkan ke halaman tujuan

Atribut title — Tooltip pada Link

Menampilkan teks kecil saat mouse diarahkan ke link:

<a href="https://google.com" title="Klik untuk membuka Google di tab baru" target="_blank">
  Google
</a>

Atribut download — Link Unduhan

Memaksa browser mengunduh file alih-alih membukanya:

<!-- Unduh dengan nama file aslinya -->
<a href="laporan.pdf" download>Unduh Laporan</a>

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

Link pada Berbagai Elemen

Hyperlink tidak hanya bisa diaplikasikan pada teks — hampir semua elemen HTML bisa dijadikan link:

Link pada gambar:

<a href="https://google.com" target="_blank">
  <img src="logo-google.png" alt="Google" width="100">
</a>

Link pada tombol:

<a href="/daftar">
  <button>Daftar Sekarang</button>
</a>

Link pada seluruh card:

<a href="/artikel/belajar-html" style="text-decoration: none; color: inherit;">
  <div class="card">
    <img src="thumbnail.jpg" alt="Thumbnail">
    <h3>Belajar HTML dari Nol</h3>
    <p>Tutorial lengkap untuk pemula...</p>
  </div>
</a>

Styling Link dengan CSS

Tampilan default link bisa diubah sepenuhnya — termasuk berbagai state-nya:

<style>
  /* State normal */
  a {
    color: #4a9eed;
    text-decoration: none;     /* hilangkan garis bawah default */
    font-weight: 500;
  }

  /* Sudah pernah dikunjungi */
  a:visited {
    color: #8b5cf6;
  }

  /* Saat mouse diarahkan */
  a:hover {
    color: #2563eb;
    text-decoration: underline;
  }

  /* Saat sedang diklik */
  a:active {
    color: #ef4444;
  }

  /* Link dengan tampilan tombol */
  a.btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #4a9eed;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
  }

  a.btn:hover {
    background-color: #2563eb;
  }
</style>

<a href="/daftar" class="btn">Mulai Belajar</a>

Navigasi Lengkap — Contoh Praktis

<style>
  nav {
    background-color: #1e1e1e;
    padding: 16px 32px;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    align-items: center;
  }

  nav a {
    color: #e5e5e5;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
  }

  nav a:hover {
    color: #4a9eed;
  }

  nav a.aktif {
    color: #4a9eed;
    font-weight: bold;
  }

  .btn-cta {
    background-color: #4a9eed;
    color: white !important;
    padding: 8px 18px;
    border-radius: 6px;
  }

  .btn-cta:hover {
    background-color: #2563eb !important;
    color: white !important;
  }
</style>

<nav>
  <ul>
    <li><a href="/" class="aktif">Beranda</a></li>
    <li><a href="/tentang">Tentang</a></li>
    <li><a href="/layanan">Layanan</a></li>
    <li><a href="/blog">Blog</a></li>
    <li>
      <a href="/kontak" class="btn-cta">Hubungi Kami</a>
    </li>
  </ul>
</nav>

Ringkasan Atribut Tag <a>

Checklist Hyperlink yang Baik ✅

✓ Teks link deskriptif — bukan "klik di sini" tapi "Baca selengkapnya tentang HTML"
✓ Link eksternal pakai target="_blank" + rel="noopener noreferrer"
✓ Link unduhan pakai atribut download
✓ Anchor link (#) punya id yang sesuai di halaman
✓ Link email pakai mailto:, link telepon pakai tel:
✓ Tambahkan title untuk konteks tambahan jika diperlukan

💡 Tips: Teks link yang baik harus deskriptif dan bermakna bahkan tanpa konteks kalimat di sekitarnya. Hindari teks seperti "klik di sini" atau "baca lebih lanjut" — gunakan teks yang menjelaskan tujuan link seperti "Unduh Panduan HTML PDF" atau "Kunjungi halaman dokumentasi resmi". Ini penting untuk SEO dan aksesibilitas. 🎯