Cara Membuat Link dan Hyperlink dalam HTML
Dalam dunia web, link atau hyperlink adalah jembatan yang menghubungkan satu halaman web ke halaman web lain, dokumen, gambar, atau sumber daya lainnya di internet. Tanpa hyperlink, web tidak akan bisa berfungsi sebagaimana mestinya, karena setiap halaman akan berdiri sendiri tanpa koneksi.
Tujuan utama dari hyperlink adalah untuk memungkinkan navigasi yang mulus bagi pengguna, dari satu informasi ke informasi berikutnya.
1. Elemen Utama: Tag <a> (Anchor)
- Fungsi Inti: <a> adalah kependekan dari "anchor". Ini adalah elemen HTML yang bertanggung jawab untuk membuat tautan. Setiap kali Anda ingin membuat sesuatu yang dapat diklik untuk membawa pengguna ke tempat lain, Anda akan menggunakan tag ini.
- Sintaks: Selalu dimulai dengan <a dan diakhiri dengan </a>. Teks atau gambar yang diletakkan di antara tag pembuka dan penutup inilah yang akan terlihat dan dapat diklik oleh pengguna.
<a href="URL_TUJUAN">Ini adalah teks yang bisa diklik</a>
2. Atribut Wajib: href (Hypertext Reference)
- Fungsi Inti: Ini adalah atribut yang paling penting dan wajib ada dalam tag <a>. Atribut href (Hypertext Reference) memberitahu browser ke mana tujuan tautan tersebut. Nilainya adalah URL (Uniform Resource Locator) dari sumber daya yang akan dibuka.
- Jenis-jenis Penggunaan href:
- Tautan ke Halaman Web Lain (Eksternal): Digunakan untuk keluar dari situs Anda dan menuju situs lain di internet. Anda harus menyertakan protokol (http:// atau https://).
<a href="https://www.w3.org">Kunjungi Konsorsium World Wide Web (W3C)</a>- Tautan ke Halaman Lain dalam Situs yang Sama (Internal/Relatif): Digunakan untuk navigasi antar halaman dalam situs Anda sendiri. Anda bisa menggunakan jalur relatif (misalnya, tentang-kami.html jika ada di folder yang sama, atau folder/halaman.html jika di sub-folder).
<a href="kontak.html">Hubungi Kami</a>- Tautan ke Bagian Tertentu dalam Halaman (Anchor Link): Berguna untuk navigasi cepat dalam dokumen yang panjang. Anda perlu memberikan id unik pada elemen tujuan, lalu mengarahkan href ke id tersebut dengan tanda #.
<h2 id="bagian-pendahuluan">Pendahuluan</h2> <a href="#bagian-pendahuluan">Lompat ke Pendahuluan</a>- Tautan Email (mailto:): Membuka aplikasi email default pengguna dengan alamat yang dituju sudah terisi.
<a href="mailto:info@domainanda.com">Kirim Email</a>- Tautan Telepon (tel:): Memulai panggilan telepon pada perangkat yang mendukungnya (misalnya, smartphone).
<a href="tel:+6281234567890">Telepon Sekarang</a>
3. Atribut Penting Lain: target
- Fungsi: Atribut target menentukan di mana halaman atau dokumen yang ditautkan akan dibuka. Ini memberikan kontrol kepada pengembang tentang pengalaman navigasi pengguna.
- Nilai-nilai Umum untuk target:
- _self (Nilai Default): Tautan akan membuka dokumen di jendela atau tab browser yang sama dengan halaman saat ini. Jika Anda tidak menulis atribut target, ini adalah perilaku standarnya.
- _blank: Tautan akan membuka dokumen di jendela atau tab browser baru. Ini sering digunakan untuk tautan eksternal agar pengguna tidak meninggalkan situs Anda.
- _parent: Membuka dokumen di frame induk. (Jarang digunakan di web modern karena penggunaan frame sudah tidak umum).
- _top: Membuka dokumen di seluruh jendela browser, menghapus semua frame yang mungkin ada. (Juga jarang digunakan).
Contoh Penggunaan target:
<a href="https://www.mozilla.org" target="_blank">Kunjungi Mozilla (akan terbuka di tab baru)</a>
<a href="halaman-berikutnya.html" target="_self">Lanjutkan ke halaman berikutnya (di tab yang sama)</a>Dengan memahami <a> sebagai tag dasar, href sebagai penentu tujuan, dan target sebagai pengatur cara pembukaan, Anda dapat membuat navigasi yang efektif dan intuitif di situs web Anda. Ini adalah elemen fundamental yang memungkinkan World Wide Web berfungsi sebagai jaringan informasi global.
