Dokumentasi HTML interaktif: Buka Link di Tab Baru

Q: Bagaimana cara membuat link terbuka di tab baru di HTML?

Tambahkan target="blank" ke tag : Example . Browser membuka halaman itu di tab baru dan tetap membiarkan halaman saat ini terbuka.

Q: Apa perbedaan noopener dan noreferrer?

noopener memutus hubungan antara kedua tab (window.opener bernilai null di tab baru). noreferrer melakukan hal yang sama dan juga mencegah browser mengirim URL halamanmu sebagai referrer, sehingga analytics situs lain melihat kunjungan itu sebagai kunjungan langsung.

Q: Bisakah HTML memaksa link terbuka di jendela baru, bukan di tab?

Tidak. target="_blank" meminta browsing context baru, dan browser serta pengaturan pengguna yang menentukan apakah itu tab atau jendela. Browser saat ini membuka tab.

Q: Bagaimana cara membuka semua link di sebuah halaman di tab baru?

Letakkan di . Setiap link tanpa target miliknya sendiri lalu terbuka di tab baru. Ini juga berpengaruh pada form, jadi pakai hanya di halaman yang memang membutuhkannya.

Cara Membuka Link di Tab Baru di HTML (target _blank)

Tambahkan target="_blank" ke sebuah link untuk membukanya di tab baru. Halaman ini membahas rel="noopener" dan noreferrer, cara memberi tahu pengguna bahwa link membuka tab baru, nilai target lainnya, dan cara melakukannya dari JavaScript.

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

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Membuka link di tab baru dengan target="_blank"

Tambahkan target="_blank" ke link-nya. Browser membuka tujuannya di tab baru dan membiarkan halamanmu tetap di tempatnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Hanya itu tekniknya: target="_blank" pada <a>, ditambah rel="noopener" yang dijelaskan berikutnya. Pembaca juga bisa membuka link apa pun di tab baru sendiri dengan Ctrl+klik (Cmd+klik di Mac) atau klik tengah. Jadi pakai target="_blank" hanya kalau meninggalkan halaman akan merugikan mereka, misalnya form yang baru setengah diisi atau video yang sedang diputar.

Preview di halaman ini membuka setiap link eksternal di tab baru, dengan atau tanpa target, karena frame contoh tidak boleh berpindah halaman. Untuk melihat perbedaan yang dibuat target, simpan contohnya sebagai file dan buka di browsermu.

rel="noopener" dan rel="noreferrer"

Dulu, halaman yang dibuka dengan target="_blank" mendapat referensi balik ke halamanmu di window.opener, dan bisa memakainya untuk mengarahkan tabmu ke URL lain (misalnya halaman login palsu). rel="noopener" menghapus referensi itu.

Nilai `rel`	`window.opener` di tab baru	Referrer dikirim ke situs baru
tidak ada (browser lama)	Halamanmu	Ya
tidak ada (browser saat ini)	`null`	Ya
`noopener`	`null`	Ya
`noreferrer`	`null`	Tidak
`opener`	Halamanmu	Ya

Chrome, Firefox dan Safari versi terbaru memperlakukan setiap link target="_blank" sebagai noopener kecuali kamu menulis rel="opener". Tetap menulis rel="noopener" melindungi pengunjung dengan browser lama dan membuat maksudnya terlihat jelas di kode.

noreferrer juga mencegah browser mengirim referrer, jadi situs yang kamu tautkan tidak tahu dari halaman mana pengunjung datang. Itu pilihan privasi, bukan keamanan: pakai kalau URL-mu harus tetap privat, dan jangan pakai untuk mitra yang perlu melihat trafik darimu.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel menerima beberapa nilai yang dipisahkan spasi, jadi noopener bisa digabung dengan nilai SEO: rel="noopener sponsored" untuk link berbayar, rel="noopener nofollow" untuk link yang tidak kamu jamin.

Beri tahu pengguna bahwa link membuka tab baru

Tab baru yang terbuka tanpa peringatan membingungkan, terutama bagi pengguna screen reader, yang mungkin tidak sadar bahwa halamannya berubah. Sebutkan hal itu di link-nya. Ikon kecil menunjukkannya kepada pengguna yang melihat layar; teks tersembunyi menyampaikannya kepada pengguna screen reader:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Selector a[target="_blank"] otomatis menambahkan panah ke setiap link tab baru, jadi kamu tidak akan lupa satu pun. Span tersembunyi itu dibaca sebagai bagian dari nama link, "accessibility guidelines (opens in a new tab)", tapi tidak memakan ruang di layar.

Tandai setiap link eksternal secara otomatis

Selector atribut bisa mengatur gaya link berdasarkan href-nya. Di sini setiap link yang diawali http mendapat panah, sedangkan link di dalam situs tidak:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= berarti "diawali dengan". Selector ini hanya mengatur gaya link: atribut target dan rel tetap harus ditulis di HTML.

Nilai-nilai target

target menentukan di mana link terbuka. Ada empat kata kunci, dan nilai lain apa pun dianggap sebagai nama:

`target`	Membuka link di
`_self`	Tab atau frame yang sama. Ini nilai default.
`_blank`	Tab baru tanpa nama
`_parent`	Induk dari frame saat ini (sama dengan `_self` di luar frame)
`_top`	Seluruh tab, keluar dari semua frame
nama apa pun, mis. `help`	Tab atau frame dengan nama itu, dibuat kalau belum ada

Target bernama dipakai ulang. Setiap link dengan target="help" terbuka di tab yang sama, jadi pembaca yang mengklik lima link bantuan mendapat satu tab, bukan lima. _top adalah pilihan yang tepat di dalam <iframe> kalau sebuah link harus mengganti seluruh halaman, bukan hanya frame-nya.

Membuka semua link di tab baru dengan elemen base

<base target="_blank"> di <head> mengatur target default untuk setiap link dan form di halaman:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

target milik link itu sendiri menang atas <base>. Jarang-jarang saja memakainya: halaman yang setiap link-nya membuka tab baru menyebalkan untuk dipakai.

Membuka tab baru dari JavaScript

window.open(url, '_blank') membuka tab dari sebuah script. Berikan 'noopener' sebagai argumen ketiga untuk perlindungan yang sama dengan atribut rel. Dengan itu, window.open mengembalikan null, bukan referensi ke tab baru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Browser memblokir window.open kecuali dijalankan sebagai respons terhadap klik atau tekan tombol, jadi panggil dari event listener, jangan saat halaman dimuat atau sesudah timer. Kalau tujuannya adalah URL yang bisa dilihat pembaca sebelumnya, link dengan target="_blank" lebih sederhana dan berfungsi tanpa JavaScript. Link itu sendiri dibahas di tag anchor HTML.

Kesalahan umum

target="blank" tanpa garis bawah. Itu sebuah nama, bukan kata kunci. Pertama kali memang membuka tab baru, lalu tab itu dipakai ulang untuk setiap link lain dengan nama yang sama.
target="_new". Ini juga hanya sebuah nama, dengan efek yang sama: satu tab yang dipakai ulang.
Menulis target di setiap link. Link internal sebaiknya terbuka di tab yang sama. Pembaca yang ingin tab baru tahu cara mendapatkannya.
Tidak ada tanda bahwa link membuka tab baru. Tambahkan ikon dan teks tersembunyi.
Menambahkan noreferrer ke link mitra atau afiliasi, lalu heran kenapa mitranya tidak melihat referral apa pun.

Pertanyaan yang sering diajukan

Bagaimana cara membuat link terbuka di tab baru di HTML?

Tambahkan target="_blank" ke tag <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Browser membuka halaman itu di tab baru dan tetap membiarkan halaman saat ini terbuka.

Apakah aku masih perlu rel="noopener" dengan target="_blank"?

Chrome, Firefox dan Safari versi terbaru otomatis menerapkan noopener pada link target="_blank", jadi halaman baru tidak bisa menjangkau balik halamanmu lewat window.opener. Menulis rel="noopener" tidak ada ruginya dan melindungi pengunjung yang memakai browser lama, jadi kebanyakan panduan gaya masih memintanya.

Apa perbedaan noopener dan noreferrer?

noopener memutus hubungan antara kedua tab (window.opener bernilai null di tab baru). noreferrer melakukan hal yang sama dan juga mencegah browser mengirim URL halamanmu sebagai referrer, sehingga analytics situs lain melihat kunjungan itu sebagai kunjungan langsung.

Bisakah HTML memaksa link terbuka di jendela baru, bukan di tab?

Tidak. target="_blank" meminta browsing context baru, dan browser serta pengaturan pengguna yang menentukan apakah itu tab atau jendela. Browser saat ini membuka tab.

Bagaimana cara membuka semua link di sebuah halaman di tab baru?

Letakkan <base target="_blank"> di <head>. Setiap link tanpa target miliknya sendiri lalu terbuka di tab baru. Ini juga berpengaruh pada form, jadi pakai hanya di halaman yang memang membutuhkannya.

Konsep terkait