Secara bawaan, setiap link menggantikan halaman saat ini di tab yang sama. Atribut target pada elemen a mengubah perilaku itu: nilai _blank memerintahkan browser membuka tujuan pada tab baru. Kemampuan ini berguna untuk referensi eksternal, tetapi membawa risiko keamanan bernama tabnabbing bila ditulis tanpa pelindung. Pada Chapter ini kita pelajari cara kerja target, mekanisme risikonya, pasangan atribut rel="noopener noreferrer" yang wajib menyertainya, serta kesepakatan penggunaan yang diharapkan pengunjung.

Atribut target dan Nilai _blank #

Atribut target menentukan tempat tujuan link ditampilkan. Nilai bawaannya _self: halaman tujuan menggantikan halaman sekarang. Nilai _blank membuka tab baru, sedangkan nilai _parent dan _top berhubungan dengan iframe — pembahasannya kita sampingkan sampai section Embedded Content. Untuk link biasa, dua nilai pertama itulah yang kita pakai:

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

Output yang Dihasilkan:

text 
Browser menampilkan link seperti biasa; klik membuka developer.mozilla.org
pada tab baru, sementara halaman kita tetap terbuka pada tab semula.

Risiko Tabnabbing #

Halaman yang dibuka lewat target="_blank" dapat membaca objek window.opener: referensi kembali ke halaman yang membukanya. Halaman berbahaya dapat memakai akses itu untuk mengubah alamat halaman asal — misalnya menggantinya dengan tiruan formulir login — sementara pengunjung masih memandang tab tersebut sebagai situs kita. Pola penipuan ini disebut reverse tabnabbing.

Atribut rel="noopener" memutus hubungan tersebut: browser tidak menyetel window.opener pada tab baru, sehingga halaman tujuan kehilangan akses ke halaman asal. Atribut rel="noreferrer" melakukan hal yang sama sekaligus menyembunyikan informasi perujuk (Referer header) dari situs tujuan. Karena keduanya saling melengkapi, keduanya lazim dituliskan berpasangan.

Kapan Layak dan Kapan Tidak #

Keputusan membuka tab baru sebaiknya berpijak pada manfaat bagi pengunjung, bukan keinginan agar situs kita terus terbuka. Peta pemakaiannya:

  • Layak dibuka di tab baru: dokumen yang berdiri sendiri seperti referensi eksternal, file laporan, atau halaman bantuan yang biasanya dibiarkan terbuka di samping.
  • Layak dibuka di tab baru: kondisi ketika proses di halaman kita belum selesai, misalnya formulir yang sedang diisi, sehingga pindah halaman berisiko menghilangkan isian.
  • Jangan buka tab baru: navigasi internal situs sendiri; pengunjung mengandalkan tombol kembali (back) browser untuk mundur, dan tab baru menghilangkan jejak tersebut.

Prinsip umumnya: biarkan pengunjung yang memilih cara membuka link. Browser menyediakan pintasan membuka tab baru — klik kanan, atau Ctrl/Cmd plus klik — sedangkan kebalikannya tidak tersedia: tab yang dipaksa terbuka tidak dapat digabung kembali ke halaman asal. Memaksa tab baru pada setiap link internal justru menyulitkan perjalanan pengunjung di situs kita.

Contoh Lengkap dalam Satu File #

File berikut membandingkan dua pola pada satu halaman: link internal yang dibuka normal dan link referensi eksternal yang dibuka di tab baru dengan pelindung lengkap:

html membuka-link-di-tab-baru.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Tab Baru</title>
</head>
<body>
  <h1>Modul Belajar HTML</h1>
  <p>Modul ini terdiri atas tiga bagian: <a href="bagian-1.html">bagian 1</a>,
    <a href="bagian-2.html">bagian 2</a>, dan
    <a href="bagian-3.html">bagian 3</a>.</p>
  <p>Bahan bacaan pelengkap:</p>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content" target="_blank" rel="noopener noreferrer">Panduan struktur konten di MDN Web Docs</a></li>
    <li><a href="https://web.dev/learn/html" target="_blank" rel="noopener noreferrer">Kursus HTML di web.dev</a></li>
  </ul>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Modul Belajar HTML" dengan tiga link bagian modul
  - Daftar dua bahan bacaan pelengkap
  - Klik link modul menggantikan halaman; klik bahan bacaan membuka
    tab baru tanpa memberi akses ke halaman asal

Mari kita telaah keputusannya:

  1. Baris 10-12 (link bagian modul): link internal tanpa target; halaman menggantikan halaman sekarang sehingga tombol kembali browser tetap berfungsi seperti biasa.
  2. Baris 15 (link MDN): target="_blank" membuka tab baru dan rel="noopener noreferrer" memutus akses window.opener sekaligus menyembunyikan perujuk.
  3. Baris 16 (link web.dev): pola yang sama diterapkan konsisten pada seluruh link eksternal; satu halaman sebaiknya tidak mencampur link tab baru berpelindung dan tanpa pelindung.

Rangkaian atribut ini menuntaskan sisi keamanan link eksternal. Chapter berikutnya beralih ke link yang tujuannya bukan halaman web: alamat email dan nomor telepon.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

membuka-link-di-tab-baru.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Tab Baru</title>
</head>
<body>
  <h1>Modul Belajar HTML</h1>
  <p>Modul ini terdiri atas tiga bagian: <a href="bagian-1.html">bagian 1</a>,
    <a href="bagian-2.html">bagian 2</a>, dan
    <a href="bagian-3.html">bagian 3</a>.</p>
  <p>Bahan bacaan pelengkap:</p>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content" target="_blank" rel="noopener noreferrer">Panduan struktur konten di MDN Web Docs</a></li>
    <li><a href="https://web.dev/learn/html" target="_blank" rel="noopener noreferrer">Kursus HTML di web.dev</a></li>
  </ul>
</body>
</html>