Hyperlink & Link HTML
Menghubungkan Halaman dengan Link
Hyperlink (atau singkatnya Link) adalah fitur utama HTML yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain di web.
Link dibuat menggunakan tag <a> (Anchor Tag).
1. Sintaks Dasar Tag <a>
Tag <a> membutuhkan atribut wajib href (Hypertext Reference) yang berisi URL atau jalur file tujuan.
<a href="https://www.google.com">Buka Google</a>
2. Atribut target
Atribut target menentukan di mana halaman tujuan akan dibuka:
-
target="_self"(default): Membuka halaman di tab/jendela yang sama. -
target="_blank": Membuka halaman di tab baru.
Contoh:
<!-- Membuka di tab baru -->
<a href="https://github.com" target="_blank">Profil GitHub</a>
Tips Keamanan: Saat menggunakan
target="_blank", disarankan menambahkan atributrel="noopener noreferrer"untuk mencegah celah keamanan (phishing/tabnabbing).<a href="https://example.com" target="_blank" rel="noopener noreferrer">Website Eksternal</a>
3. Link Absolut vs Link Relatif
Link Absolut
Menggunakan URL lengkap beserta protokol (http:// atau https://). Digunakan untuk menghubungkan ke website eksternal.
<a href="https://wikipedia.org">Wikipedia</a>
Link Relatif
Menggunakan jalur lokal (path) file di dalam folder project. Digunakan untuk navigasi antar halaman internal web.
<!-- Menuju file kontak di folder yang sama -->
<a href="kontak.html">Hubungi Kami</a>
<!-- Menuju file di folder lain -->
<a href="materi/html.html">Belajar HTML</a>
<!-- Kembali ke folder induk (parent directory) -->
<a href="../index.html">Kembali ke Beranda</a>
4. Anchor Link (Link dalam Satu Halaman)
Anchor link digunakan untuk melompat ke bagian tertentu pada halaman yang sama menggunakan atribut id.
<!-- Pembuat link melompat ke ID tertentu -->
<a href="#bagian-kontak">Melompat ke Bagian Kontak</a>
...
<!-- Elemen tujuan yang memiliki ID -->
<h2 id="bagian-kontak">Kontak Kami</h2>
<p>Email: info@example.com</p>
5. Link Email dan Telepon
Anda bisa membuat link khusus yang akan langsung membuka aplikasi email atau penelepon di perangkat pengguna:
<!-- Link kirim email -->
<a href="mailto:admin@example.com">Kirim Email ke Admin</a>
<!-- Link panggilan telepon -->
<a href="tel:+6281234567890">Hubungi CS via Telepon</a>
