Pendahuluan
Apa itu Link dengan Target Blank?
Link dengan target blank adalah tautan yang, ketika diklik, akan membuka halaman web baru di tab atau jendela baru di browser web. Ini berbeda dari tautan biasa, yang terbuka di tab atau jendela yang sama.
Apa Itu target="_blank"?
target="_blank" adalah atribut HTML yang digunakan untuk menentukan bahwa tautan harus dibuka dalam jendela atau tab baru browser. Ini mengakibatkan tautan yang diberi atribut ini akan membuka konten yang ditautkan tanpa mengganti halaman atau situs web yang saat ini ditampilkan.
Manfaat Link dengan Target Blank
- Membuka situs web baru tanpa meninggalkan halaman saat ini: Ini berguna saat Anda ingin menjelajahi situs web baru tanpa kehilangan halaman yang Anda baca saat ini.
- Membuat pengguna tetap berada di situs web Anda: Ketika Anda menautkan ke situs web lain dengan target blank, pengguna akan tetap berada di situs web Anda saat mereka membuka situs web baru.
- Meningkatkan pengalaman pengguna: Membuka tautan di tab baru dapat memberikan pengalaman pengguna yang lebih baik, karena pengguna dapat dengan mudah beralih antar halaman web.
Cara Menggunakan target="_blank"
Anda dapat menggunakan atribut target="_blank" di dalam tag <a> (tautan) untuk membuka tautan eksternal dalam jendela atau tab baru. Ada dua cara untuk menambahkan target blank ke link:
Menggunakan HTML:
<a href="https://www.contoh.com" target="blank">Tautan Contoh</a>
Anda dapat menambahkan atribut target="_blank" ke tag <a> HTML. Berikut ini contohnya:
Menggunakan JS:
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Penggunaan target=_blank dengan JavaScript</title>
</head>
<!--[ <body> open ]-->
<body>
<button onclick="openNewTab()">Buka Tautan di Tab Baru</button>
</body>
<!--[ </body> close ]-->
</html>
/* No CSS */
function openNewTab() {
// URL yang ingin Anda buka di tab baru
var url = "https://www.contoh.com";
// Membuka URL di tab baru dengan window.open()
// Anda dapat menentukan target "_blank" sebagai argumen kedua
window.open(url, "_blank");
}
Dalam contoh di atas, saat tombol ditekan, fungsi openNewTab() akan dijalankan. Fungsi ini menggunakan window.open() untuk membuka URL yang ditentukan dalam tab baru dengan menggunakan target="_blank".
Pastikan bahwa pop-up blocker browser tidak menghalangi pembukaan tab baru dengan menggunakan window.open(). Beberapa browser mungkin memerlukan interaksi pengguna sebelum membuka tab baru.
Keuntungan Penggunaan target="_blank"
Memudahkan Navigasi: Pengguna dapat tetap berada di halaman asal sambil membuka tautan eksternal.
Meningkatkan Retensi Pengguna: Pengguna tetap berada di situs Anda sambil menjelajahi tautan tambahan, yang dapat meningkatkan retensi pengguna.
Meminimalkan Kehilangan Pengguna: Dengan membuka tautan eksternal dalam jendela baru, Anda mengurangi kemungkinan kehilangan pengguna karena mereka tetap berada di situs Anda.
Kekhawatiran dan Praktik Terbaik
Aksesibilitas: Membuka tautan dalam tab baru dapat membingungkan bagi beberapa pengguna. Penting untuk mempertimbangkan pengalaman pengguna dan aksesibilitas.
Perilaku yang Tak Diinginkan: Beberapa pengguna mungkin tidak menghargai tautan yang membuka jendela atau tab baru tanpa persetujuan mereka. Sebaiknya gunakan dengan bijaksana.
Penyalahgunaan oleh Pengembang: Penyalahgunaan
target="_blank"dapat dimanfaatkan oleh pihak yang tidak bermoral untuk membuka tautan berbahaya atau iklan tanpa izin pengguna.
Alternatif dan Pendekatan Lebih Baik
target="_blank" dengan rel="noopener": Menambahkan
rel="noopener"pada tautan yang menggunakantarget="_blank"membantu mencegah jendela baru tersebut mengakseswindow.opener, yang dapat menjadi titik masuk bagi serangan XSS (Cross-Site Scripting).Pemberitahuan Pengguna: Jika memungkinkan, beri tahu pengguna bahwa tautan akan membuka jendela baru. Ini memberikan kontrol kepada mereka.
Pertimbangkan Pengguna Ponsel: Pada perangkat mobile, perilaku
target="_blank"mungkin berbeda. Pastikan pengalaman pengguna konsisten di berbagai platform.
Kesimpulan
Dengan memahami cara yang tepat untuk menggunakan target="_blank", Anda dapat meningkatkan navigasi pengguna tanpa mengorbankan pengalaman pengguna yang baik. Selalu penting untuk mempertimbangkan keamanan, aksesibilitas, dan kenyamanan pengguna dalam pengembangan web.
Orang lain juga bertanya (FAQ)
- Menggunakan text-align: Cara sederhana dengan properti
text-align: center;. - Menggunakan margin: Memanfaatkan
margin: 0 auto;untuk pusat horizontal. - Menggunakan Flexbox: Menerapkan display flex untuk pengaturan yang lebih fleksibel.
- Menggunakan Grid: Menggunakan CSS Grid untuk penataan tombol di tengah.
Bagaimana cara mengubah warna tombol menggunakan CSS?
Anda dapat mengubah warna tombol dengan properti background-color di CSS.
Apa perbedaan antara Flexbox dan Grid dalam menengahkan tombol?
Flexbox digunakan untuk penataan elemen dalam satu dimensi, sementara Grid mengatur elemen dalam dua dimensi.
Apakah metode ini berfungsi untuk semua jenis tombol?
Ya, metode ini dapat digunakan untuk menengahkan tombol apapun, termasuk tombol HTML biasa dan tombol yang dihasilkan melalui CSS.
Apakah metode ini membuat tombol menjadi responsif?
Responsifitas tombol dapat dicapai dengan teknik tambahan, seperti media queries.
Bagaimana cara mengatur tombol di tengah secara vertikal?
Anda dapat mengatur tombol di tengah vertikal dengan menggunakan teknik Flexbox atau Grid dan properti seperti align-items.