Langsung ke konten

Anchor Link HTML: Cara Membuat Hyperlink di HTML

Pelajari cara membuat hyperlink menggunakan tag anchor <a> di HTML. Pahami attribute href, target blank, mailto link, dan telephone link.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami comment di HTML, saatnya kita belajar membuat hyperlink — fitur dasar yang membuat web saling terhubung.

Anchor link atau hyperlink adalah elemen yang menghubungkan satu halaman web dengan halaman lain, atau bagian tertentu dalam satu halaman. Tanpa hyperlink, internet hanyalah kumpulan halaman yang terpisah tanpa jalur navigasi.

Di HTML, hyperlink dibuat menggunakan tag <a> (anchor). Tag inilah yang membuat teks atau gambar menjadi “klik able” dan bisa membawa pengunjung ke lokasi lain.

Berikut syntax dasar anchor link di HTML:

<a href="https://www.example.com">Kunjungi Example</a>

Tag <a> memiliki attribute penting bernama href yang berisi URL tujuan. Teks di antara tag <a> dan </a> akan ditampilkan sebagai link yang bisa diklik.

Attribute href

Attribute href (hypertext reference) adalah attribute wajib pada tag <a>. Attribute ini menentukan ke mana link akan mengarah.

URL Lengkap (Absolute URL)

<a href="https://www.google.com">Google</a>
<a href="https://www.youtube.com/watch?v=abc123">Video Tutorial</a>

Path Relatif (Relative URL)

<a href="/about.html">Tentang Kami</a>
<a href="kontak.html">Hubungi Kami</a>
<a href="../index.html">Kembali ke Beranda</a>

Relative URL berguna untuk link internal dalam satu website. Path dihitung dari lokasi file HTML saat ini.

Secara default, link akan membuka di tab yang sama. Untuk membuka link di tab baru, gunakan attribute target="_blank":

<a href="https://www.google.com" target="_blank">Google (Tab Baru)</a>

Menambahkan rel=“noopener noreferrer”

Saat menggunakan target="_blank", sebaiknya tambahkan rel="noopener noreferrer" untuk keamanan:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
  • noopener — Mencegah halaman baru mengakses window.opener
  • noreferrer — Tidak mengirim informasi referer ke halaman tujuan

Kamu bisa membuat link yang langsung menuju bagian tertentu dalam satu halaman. Caranya dengan menggunakan # diikuti ID elemen tujuan.

Langkah 1: Berikan ID pada Elemen Tujuan

<h2 id="bagian-1">Bagian Pertama</h2>
<p>Isi bagian pertama...</p>

<h2 id="bagian-2">Bagian Kedua</h2>
<p>Isi bagian kedua...</p>

<h2 id="bagian-3">Bagian Ketiga</h2>
<p>Isi bagian ketiga...</p>

<a href="#bagian-1">Ke Bagian 1</a>
<a href="#bagian-2">Ke Bagian 2</a>
<a href="#bagian-3">Ke Bagian 3</a>

Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Anchor Link</title>
  </head>
  <body>
    <nav>
      <a href="#pengertian">Pengertian</a> |
      <a href="#cara-kerja">Cara Kerja</a> |
      <a href="#manfaat">Manfaat</a>
    </nav>

    <h2 id="pengertian">Pengertian Hyperlink</h2>
    <p>Hyperlink adalah elemen yang menghubungkan halaman web...</p>

    <h2 id="cara-kerja">Cara Kerja Hyperlink</h2>
    <p>Ketika link diklik, browser akan mengirim request...</p>

    <h2 id="manfaat">Manfaat Hyperlink</h2>
    <p>Hyperlink memudahkan navigasi dan menjelajahi konten...</p>
  </body>
</html>

Anchor link ini sangat berguna untuk daftar isi (table of contents) pada artikel panjang.

Mailto link digunakan untuk membuat link yang membuka aplikasi email pengunjung. Ketika link ini diklik, aplikasi email akan terbuka dengan alamat tujuan sudah terisi.

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

Mailto dengan Subjek dan Body

Kamu juga bisa menambahkan subjek dan isi email:

<a href="mailto:[email protected]?subject=Pertanyaan&body=Halo, saya ingin bertanya...">
  Kirim Pertanyaan via Email
</a>
  • subject — Subjek email
  • body — Isi pesan email

Telephone link digunakan untuk membuat link yang bisa melakukan panggilan telepon. Fitur ini sangat berguna untuk website yang diakses dari perangkat mobile.

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

Ketika link ini diklik di perangkat mobile, aplikasi telepon akan terbuka dan siap melakukan panggilan.

Anchor link tidak hanya untuk teks. Kamu juga bisa membungkus gambar dengan tag <a> agar gambar menjadi link:

<a href="https://www.google.com">
  <img src="logo-google.png" alt="Logo Google" />
</a>

Ketika gambar diklik, pengunjung akan dibawa ke halaman yang ditentukan.

1. Gunakan Teks yang Deskriptif

<!-- ❌ Tidak baik -->
<a href="https://www.google.com">Klik di sini</a>

<!-- ✅ Baik -->
<a href="https://www.google.com">Kunjungi Google</a>

Teks link harus menjelaskan ke mana link akan mengarah. Hindari penggunaan “klik di sini”.

2. Gunakan href yang Valid

<!-- ❌ Tidak baik -->
<a href="#">Link Kosong</a>
<a href="javascript:void(0)">Link JavaScript</a>

<!-- ✅ Baik -->
<a href="/kontak">Hubungi Kami</a>

Hindari link kosong atau menggunakan JavaScript untuk navigasi.

Beritahu pengunjung jika link akan membuka halaman eksternal:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  Google (opens in new tab)
</a>

Saat menggunakan anchor link dengan #, pastikan ID yang dituju benar-benar ada di halaman. Link yang rusak akan mengarah ke atas halaman (scroll to top).

Contoh Penggunaan Lengkap

Berikut contoh halaman yang menggabungkan berbagai jenis anchor link:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Anchor Link Lengkap</title>
  </head>
  <body>
    <header>
      <h1>Website Saya</h1>
      <nav>
        <a href="#beranda">Beranda</a>
        <a href="#tentang">Tentang</a>
        <a href="#layanan">Layanan</a>
        <a href="#kontak">Kontak</a>
        <a href="https://github.com/hanifmu" target="_blank" rel="noopener noreferrer">GitHub</a>
      </nav>
    </header>

    <main>
      <section id="beranda">
        <h2>Beranda</h2>
        <p>Selamat datang di website saya.</p>
      </section>

      <section id="tentang">
        <h2>Tentang Saya</h2>
        <p>Saya adalah seorang web developer.</p>
      </section>

      <section id="layanan">
        <h2>Layanan</h2>
        <p>Saya menyediakan jasa pembuatan website.</p>
      </section>

      <section id="kontak">
        <h2>Kontak</h2>
        <p>Hubungi saya melalui:</p>
        <ul>
          <li><a href="mailto:[email protected]">Email</a></li>
          <li><a href="tel:+6281234567890">Telepon</a></li>
          <li><a href="https://wa.me/6281234567890" target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
        </ul>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Website Saya</p>
    </footer>
  </body>
</html>

Ringkasan

  • Anchor link dibuat dengan tag <a> dan attribute href
  • href berisi URL tujuan, bisa absolute URL atau relative URL
  • target="_blank" membuka link di tab baru
  • Tambahkan rel="noopener noreferrer" untuk keamanan saat menggunakan target="_blank"
  • Anchor link (#id) berguna untuk navigasi dalam satu halaman
  • Mailto link (mailto:) membuka aplikasi email
  • Telephone link (tel:) membuka aplikasi telepon
  • Gunakan teks link yang deskriptif, hindari “klik di sini”

Langkah Selanjutnya

Kamu sudah memahami cara membuat hyperlink menggunakan anchor link di HTML. Di artikel selanjutnya, kita akan belajar tentang image <img> — cara menampilkan gambar di halaman web.