Hyperlink

Hubungkan halaman dan situs dengan tag a dan href.

Pahami konsepnya

Hyperlink — biasa disebut tautan atau link — adalah pintu antar halaman: teks atau gambar yang saat diklik membawa pengunjung ke alamat yang sudah ditentukan. Seluruh jaringan web tersambung karena tahuannya; nama "web" sendiri lahir dari anyaman tautan ini.

Tautan dibuat dengan tag <a> dan alamatnya diletakkan pada atribut href. Isi elemen — teks atau gambar — menjadi bagian yang bisa diklik. Alamatnya bisa berupa halaman lain di situsmu (halaman.html), berbeda folder (folder/halaman.html), mundur satu folder (../halaman.html), atau situs mana pun di internet dengan alamat lengkap (https://...).

Atribut pendukung yang sering dipakai: target="_blank" membuka tautan di tab baru, dan title memberi tooltip saat kursor melayang. Untuk melompat ke bagian dalam satu halaman, href diisi #nama-id dari elemen tujuan — teknik yang dipakai daftar isi panjang.

Coba contoh kode

<p>
  <a href="tentang.html">Tentang kami</a> —
  <a href="https://www.google.com" target="_blank">Google (tab baru)</a> —
  <a href="#kontak">Lompat ke kontak</a>
</p>

<h2 id="kontak">Kontak</h2>

Tiga rasa tautan sekaligus: relatif ke berkas sendiri (tentang.html), situs luar lengkap dengan https dan tab baru, dan jangkar internal menuju id="kontak" di halaman yang sama. Klik yang ketiga dan layar melompat ke heading Kontak.

Tautan gambar dan email

<a href="galeri.html">
  <img src="album.jpg" alt="Buka galeri" width="120">
</a>

<a href="mailto:halo@situskamu.id">Kirim email</a>

Isi tautan tidak harus teks — gambar di dalam a menjadi tombol yang bisa diklik. Awalan mailto: membuka aplikasi email pengunjung dengan alamat tujuan sudah terisi.

Latihan singkat

Buat halaman dua bagian dengan daftar isi tautan jangkar di atasnya, lalu tambahkan satu tautan eksternal yang membuka tab baru.