Selamat datang di artikel kedelapan dari seri “Belajar HTML”! Elemen yang akan kita pelajari kali ini adalah jantung dari World Wide Web itu sendiri: Link atau Hyperlink. Tanpa link, internet hanya akan menjadi kumpulan dokumen yang terisolasi. Link-lah yang menjadi jembatan penghubungnya.

Link memungkinkan pengguna untuk bernavigasi dari satu halaman ke halaman lain, baik di dalam situs yang sama maupun ke situs yang benar-benar berbeda, hanya dengan satu kali klik.

Anatomi Dasar Link HTML

Untuk membuat sebuah link di HTML, kita menggunakan tag <a>, yang merupakan singkatan dari anchor (jangkar). Tag ini tidak bisa berdiri sendiri; ia memerlukan atribut href untuk menentukan alamat tujuan.

Struktur dasar sebuah link adalah sebagai berikut:

<a href="URL_tujuan">Teks yang akan diklik</a>

Mari kita bedah bagian-bagiannya:

• <a>: Tag pembuka yang menandakan kita akan membuat sebuah link.
• href: Atribut wajib yang merupakan singkatan dari Hypertext Reference. Isinya adalah alamat atau URL tujuan link tersebut.
• Teks yang akan diklik: Ini adalah bagian yang akan terlihat oleh pengguna di halaman web. Teks inilah yang bisa diklik.
• </a>: Tag penutup untuk link.

Contoh paling sederhana:

<p>Anda bisa mencari informasi apapun melalui <a href="https://www.google.com">Google</a>.</p>

Pada contoh di atas, teks “Google” akan menjadi link yang bisa diklik dan akan mengarahkan pengguna ke situs Google.

Jenis-Jenis Link

Ada beberapa jenis link berdasarkan tujuannya, dan penting untuk memahami perbedaannya.

1. Link Absolut (Eksternal)

Ini adalah link yang menunjuk ke alamat web lengkap di situs lain. Anda harus menyertakan protokolnya (http:// atau https://).

<p>Kunjungi <a href="https://www.detik.com">Detik.com</a> untuk berita terkini.</p>

2. Link Relatif (Internal)

Ini adalah link yang menunjuk ke halaman lain di dalam situs web yang sama. Anda tidak perlu menulis alamat lengkap, cukup jalur relatif dari file saat ini. Ini adalah cara paling umum untuk menghubungkan halaman-halaman dalam satu website.

Misalkan Anda memiliki struktur folder: index.html halaman/tentang-kami.html

Dari index.html, Anda bisa membuat link ke halaman “Tentang Kami” seperti ini:

<a href="halaman/tentang-kami.html">Pelajari lebih lanjut tentang kami</a>

3. Anchor Link (Link ke Bagian Tertentu)

Link ini tidak membawa Anda ke halaman lain, melainkan melompat ke bagian tertentu di halaman yang sama. Ini sangat berguna untuk halaman yang panjang, seperti membuat daftar isi.

Prosesnya terdiri dari dua langkah:

• Langkah 1: Beri ID pada elemen tujuan. Gunakan atribut id pada elemen yang ingin Anda tuju.
• Langkah 2: Buat link menggunakan tanda pagar (#) diikuti dengan nama ID.

Contoh:

<p>Lompat ke <a href="#bab2">Bab 2: Pembahasan</a></p>

... (konten halaman yang panjang) ...

<h2 id="bab2">Bab 2: Pembahasan</h2>
<p>Ini adalah isi dari bab kedua...</p>

Atribut Penting pada Link

Selain href, ada beberapa atribut lain yang sangat berguna.

• target: Atribut ini menentukan di mana link akan dibuka.
  • _self: (Default) Link dibuka di tab atau jendela yang sama.
  • _blank: Link dibuka di tab atau jendela baru. Ini sangat direkomendasikan untuk link eksternal agar pengguna tidak meninggalkan situs Anda.
  HTML

  <a href="https://www.wikipedia.org" target="_blank">Buka Wikipedia di tab baru</a>
  

  Praktik Terbaik Keamanan: Saat menggunakan target="_blank", tambahkan rel="noopener noreferrer" untuk meningkatkan keamanan dan mencegah halaman baru memanipulasi halaman asli.

  HTML

  <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Buka Wikipedia di tab baru (aman)</a>
  

• title: Atribut ini memberikan informasi tambahan tentang link. Teksnya akan muncul sebagai tooltip saat pengguna mengarahkan kursor mouse ke link.
  HTML

  <a href="profil.html" title="Lihat profil lengkap saya">Profil Saya</a>
  

Membuat Link pada Gambar

Anda tidak hanya bisa membuat link dari teks, tetapi juga dari gambar. Caranya sangat mudah, cukup letakkan tag <img> di dalam tag <a>.

<a href="https://www.google.com" target="_blank">
  <img src="logo-google.png" alt="Logo Google">
</a>

Link Khusus: Email dan Telepon

HTML juga memungkinkan kita membuat link yang memicu aksi tertentu di perangkat pengguna.

• Link Email (mailto:): Saat diklik, link ini akan membuka aplikasi email default pengguna dengan alamat tujuan yang sudah terisi.
  HTML

  <a href="mailto:info@perusahaan.com">Kirim Email kepada Kami</a>
  

• Link Telepon (tel:): Sangat berguna di perangkat mobile. Saat diklik, link ini akan membuka aplikasi telepon dan mengisi nomor tujuan.
  HTML

  <a href="tel:+6281234567890">Hubungi Kami (+62 812-3456-7890)</a>
  

Kesimpulan & Praktik Terbaik

1. Gunakan tag <a> dengan atribut href untuk semua link.
2. Gunakan teks yang deskriptif untuk link Anda. Hindari teks seperti “Klik di sini”. Teks yang baik membantu pengguna dan mesin pencari memahami tujuan link sebelum mengkliknya. (Contoh: “Pelajari lebih lanjut tentang layanan kami” lebih baik daripada “Untuk layanan kami, klik di sini”).
3. Gunakan target="_blank" untuk link eksternal agar pengguna tetap berada di situs Anda.
4. Selalu uji link Anda untuk memastikan tujuannya benar dan tidak ada yang rusak (broken link).

Link adalah elemen fundamental yang membuat web menjadi interaktif. Dengan memahaminya, Anda telah mengambil langkah besar dalam perjalanan menjadi pengembang web. Sampai jumpa di artikel selanjutnya!