Dokumentasi HTML interaktif: Link (a href)

Q: Bagaimana cara membuat link di HTML?

Pakai elemen anchor: Example . href adalah tujuannya dan teks di antara tag-nya adalah yang diklik pembaca.

Q: Bagaimana cara membuat link ke bagian tertentu di halaman?

Beri elemen tujuan sebuah id, lalu buat link ke sana dengan tanda pagar: FAQ dan FAQ . Dari halaman lain, tambahkan tanda pagar ke URL-nya: .

Q: Kenapa link-ku menuju halaman yang salah saat aku menulis www?

Kalau tidak ada https:// di depannya, browser menganggap www.example.com sebagai path relatif di situsmu sendiri, jadi link-nya menuju sesuatu seperti yoursite.com/www.example.com. Selalu tulis skemanya untuk link eksternal: href="https://www.example.com".

Q: Bolehkah tag a berisi div?

Boleh. Di HTML5, bisa membungkus konten blok seperti , heading, dan paragraf, begitulah cara membuat link satu kartu penuh. Tag ini tidak boleh berisi link lain, tombol, atau elemen interaktif lainnya.

Tag Anchor HTML: Cara Membuat Link dengan a href

Cara elemen <a> membuat link: atribut href, URL absolut dan relatif, melompat ke bagian halaman dengan #id, link unduhan, link kartu, dan kesalahan yang membuat link rusak.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara membuat link di HTML

Link adalah elemen anchor, <a>, dengan atribut href. href adalah tujuan link; konten di antara tag-nya adalah yang diklik pembaca.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Browser menampilkan link dengan warna biru dan bergaris bawah, lalu mengubah kursor menjadi tangan. Baris terakhir menunjukkan kenapa href penting: tanpanya, <a> hanyalah teks biasa. Elemen itu tidak bisa difokus, tidak bisa diklik, dan tidak diberi gaya seperti link.

URL absolut dan relatif

Nilai href menentukan ke mana link pergi. Bentuk-bentuk utamanya:

`href`	Menuju
`https://example.com/page`	URL absolut: tepat ke alamat itu
`/about`	`about` di root situs saat ini
`about.html`	`about.html` di folder yang sama dengan halaman saat ini
`../index.html`	`index.html` satu folder di atasnya
`#pricing`	Elemen dengan `id="pricing"` di halaman ini
`/help#faq`	Bagian `faq` di halaman lain di situs ini
`mailto:hi@example.com`	Email baru di aplikasi email pembaca
`tel:+15551234567`	Panggilan telepon, di perangkat yang bisa melakukannya

Pakai URL absolut untuk situs lain dan path relatif dari root (/about) di dalam situsmu sendiri: path seperti itu tetap berfungsi saat halaman yang memuatnya pindah ke folder lain.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Baris terakhir adalah bug link yang paling umum. Tanpa https://, browser membaca www.wikipedia.org sebagai nama file di folder saat ini.

Link email dan telepon punya halamannya sendiri: link email HTML.

Membuat link ke bagian halaman

Elemen apa pun yang punya id bisa menjadi tujuan. Buat link ke sana dengan # diikuti id-nya, dan browser akan menggulir ke elemen itu. Klik link-link di pratinjau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Beberapa detail:

id harus sama persis, termasuk huruf besar kecilnya. href="#FAQ" tidak menemukan id="faq".
href="#top" dan href="#" menggulir ke bagian atas halaman walaupun tidak ada elemen dengan id top.
Selector :target memberi gaya pada bagian yang sedang ditunjuk URL. Di halaman sungguhan, bagian itu akan disorot; pratinjau menggulir tanpa mengubah alamatnya, jadi sorotannya tidak terlihat di sana.
Untuk membuat link ke bagian di halaman lain, tambahkan tanda pagar ke URL halaman itu: <a href="/docs/html/table#caption">.

Header yang sticky atau fixed menutupi bagian atas section yang kamu tuju. scroll-margin-top di elemen tujuan menyisakan ruang untuknya, dan scroll-behavior: smooth menganimasikan lompatannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Hapus baris scroll-margin-top lalu klik Two lagi: heading-nya jadi tersembunyi di balik header gelap.

Link unduhan

Atribut download meminta browser menyimpan file, bukan membukanya. Nilainya, kalau kamu memberinya, adalah nama file yang disarankan:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download hanya berfungsi untuk file di origin yang sama dengan halaman (skema, host, dan port yang sama) dan untuk URL data: dan blob:. Untuk file di origin lain, bahkan subdomain, browser mengabaikannya dan membuka file itu seperti link biasa. Server bisa memaksa unduhan untuk file apa pun dengan header Content-Disposition: attachment.

Teks link yang jelas

Pengguna screen reader sering menelusuri halaman dari link ke link, hanya mendengar teks link-nya. "Klik di sini" dan "Baca selengkapnya" tidak memberi tahu mereka apa pun.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

Atribut title menampilkan tooltip saat kursor di atasnya, tapi tidak ditampilkan di layar sentuh atau ke sebagian besar pengguna keyboard, jadi jangan taruh apa pun yang penting di dalamnya.

Membuat satu kartu penuh menjadi link

<a> bisa membungkus konten blok: heading, gambar, dan paragraf bisa semuanya menjadi satu link. Begitulah cara membuat kartu yang bisa diklik.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block membuat seluruh kotak bisa diklik, bukan hanya teksnya. Buat isi kartunya singkat, karena screen reader membaca semuanya sebagai nama link. Dan jangan pernah menaruh link lain atau tombol di dalamnya: elemen interaktif tidak boleh bersarang di dalam <a>.

Atribut lain dari tag a

Atribut	Fungsinya
`href`	Tujuannya. Tanpa atribut ini, `<a>` bukan link
`target`	Di mana link dibuka; `target="_blank"` membuka tab baru, lihat membuka link di tab baru
`rel`	Hubungan dengan tujuannya: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Simpan file, bukan membukanya
`hreflang`	Bahasa halaman yang dituju, sebagai petunjuk
`referrerpolicy`	Seberapa banyak URL saat ini yang dikirim sebagai referrer

Kesalahan umum

Tidak ada skema di URL eksternal. href="www.site.com" adalah path relatif. Tulis https://.
<a href="#"> untuk aksi JavaScript. Link itu menggulir ke atas dan menambahkan # ke URL. Kalau mengkliknya tidak menuju ke mana pun, pakai <button>.
Link di dalam link, atau tombol di dalam link. Keduanya HTML yang tidak valid: <a> kedua membuat parser menutup yang pertama lebih awal, dan klik pada tombol di dalam link tidak punya tujuan yang jelas.
Spasi di nama file. href="my file.html" biasanya berfungsi karena browser meng-encode spasinya, tapi my-file.html menghindari masalah itu sama sekali.
"Klik di sini" sebagai teks link. Jelaskan tujuannya.
Huruf besar kecil id yang tidak cocok. #Pricing dan id="pricing" berbeda.

Pertanyaan yang sering diajukan

Bagaimana cara membuat link di HTML?

Pakai elemen anchor: <a href="https://example.com">Example</a>. href adalah tujuannya dan teks di antara tag-nya adalah yang diklik pembaca.

href singkatan dari apa?

Hypertext reference. Atribut ini berisi URL yang dituju link: alamat lengkap, path di situs yang sama seperti /about, bagian halaman seperti #pricing, atau skema seperti mailto:.

Bagaimana cara membuat link ke bagian tertentu di halaman?

Beri elemen tujuan sebuah id, lalu buat link ke sana dengan tanda pagar: <h2 id="faq">FAQ</h2> dan <a href="#faq">FAQ</a>. Dari halaman lain, tambahkan tanda pagar ke URL-nya: <a href="/help#faq">.

Kenapa link-ku menuju halaman yang salah saat aku menulis www?

Kalau tidak ada https:// di depannya, browser menganggap www.example.com sebagai path relatif di situsmu sendiri, jadi link-nya menuju sesuatu seperti yoursite.com/www.example.com. Selalu tulis skemanya untuk link eksternal: href="https://www.example.com".

Bolehkah tag a berisi div?

Boleh. Di HTML5, <a> bisa membungkus konten blok seperti <div>, heading, dan paragraf, begitulah cara membuat link satu kartu penuh. Tag ini tidak boleh berisi link lain, tombol, atau elemen interaktif lainnya.

Konsep terkait