0Pricing
HTML Academy · Pelajaran

Membuka Tautan di Tab Baru dan Atribut Download

Gunakan atribut target dan download untuk mengatur perilaku tautan.

Membuka Tautan di Tab Baru dan Atribut Download adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Membuka di Tab Baru

Atribut target mengontrol tempat dokumen tertaut dibuka:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

Risiko Keamanan _blank

target="_blank" tanpa langkah pencegahan dapat menimbulkan kerentanan keamanan:

  • Halaman baru dapat mengakses halaman pembuka melalui window.opener
  • Halaman berbahaya dapat mengalihkan tab asli
  • Serangan ini disebut pembajakan tab terbalik

rel=noopener noreferrer

Selalu tambahkan rel="noopener noreferrer" saat menggunakan target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Kapan Membuka Tab Baru

Panduan pengalaman pengguna untuk target="_blank":

  • Gunakan untuk situs eksternal yang tidak diharapkan pengguna saat meninggalkan aplikasi Anda
  • Gunakan untuk dokumen referensi (PDF, panduan)
  • Jangan gunakan untuk navigasi halaman internal
  • Selalu beri tahu pengguna—tambahkan ikon atau judul yang menyatakan "terbuka di tab baru"

Menunjukkan Tab Baru kepada Pengguna

Beri tahu pengguna bahwa tautan dibuka di tab baru:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

Atribut Pengunduhan

Atribut download memberi tahu peramban untuk mengunduh berkas tertaut alih-alih menavigasi ke berkas tersebut:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Batasan Atribut Pengunduhan

Atribut download memiliki beberapa batasan:

  • Hanya berfungsi untuk alamat web dari asal yang sama
  • Pengunduhan lintas asal mengharuskan server mengirim Content-Disposition: attachment
  • Nama berkas dalam download hanyalah saran—tajuk server dapat menggantinya

Pengunduhan URI Data

Anda dapat mengunduh konten yang dibuat menggunakan URI data:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript dan Target Tautan

Saat JavaScript menangani navigasi, hindari penyalahgunaan target="_blank":

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Atribut Ping

Atribut ping mengirim permintaan POST saat tautan diklik (untuk analitik):

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Atribut Jenis pada Tautan

Atribut type memberikan petunjuk tentang jenis MIME sumber daya tertaut:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Pemeriksaan Cepat

Atribut keamanan apa yang harus selalu menyertai target="_blank"?

Rangkuman: target dan download

Atribut perilaku tautan:

  • target="_blank" — membuka di tab baru
  • Selalu tambahkan rel="noopener noreferrer" bersama _blank
  • Beri peringatan visual kepada pengguna saat tautan dibuka di tab baru
  • download — memicu pengunduhan berkas alih-alih navigasi
  • download="filename" — menyarankan nama berkas untuk pengunduhan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuka Tautan di Tab Baru dan Atribut Download” gratis?

Ya — teks lengkap “Membuka Tautan di Tab Baru dan Atribut Download” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuka Tautan di Tab Baru dan Atribut Download”?

Gunakan atribut target dan download untuk mengatur perilaku tautan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membuka Tautan di Tab Baru dan Atribut Download” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen anchor dan Atribut href
  2. URL Absolut vs Relatif
  3. Membuka Tautan di Tab Baru dan Atribut Download
  4. Menautkan ke Bagian dengan Identifier Fragmen
← Kembali ke HTML Academy