Membuat Hyperlink

Sebuah halaman web jarang berdiri sendiri: artikel merujuk ke sumber, menu mengarah ke halaman lain, dan logo menghubungkan pengunjung ke beranda. Penghubung tersebut disebut hyperlink, dan inilah alasan huruf HT pada HyperText Markup Language ada. Pada Chapter ini kita membangun hyperlink pertama dengan elemen a dan atribut href, mengubah teks biasa menjadi link, menulis teks link yang deskriptif, lalu memakai kemampuan a untuk membungkus elemen lain seperti gambar. Kita mulai dari bentuk paling sederhana, kemudian menaikkan kompleksitasnya bertahap.

Elemen a dan Atribut href #

Elemen a — singkatan dari anchor — adalah elemen yang menandai hyperlink. Atribut href (hypertext reference) menentukan tujuan link, dan nilainya berupa URL: alamat yang dapat menunjuk halaman lain, file, atau bagian tertentu dari sebuah dokumen. Konten di antara opening tag dan closing tag menjadi teks yang dapat diklik, sedangkan browser menampilkannya bergaris bawah dan berwarna biru secara bawaan. Tanpa atribut href, elemen a hanyalah penanda kosong tanpa tujuan.

<a href="https://developer.mozilla.org/">Dokumentasi resmi MDN Web Docs</a>

Output yang Dihasilkan:

Browser menampilkan teks "Dokumentasi resmi MDN Web Docs" bergaris bawah
dan berwarna biru; klik mengarahkan browser ke developer.mozilla.org.

Mengubah Teks Biasa Menjadi Link #

Latihan pertama kita berangkat dari sebuah paragraf polos. Kita bungkus bagian teks yang ingin dijadikan tautan dengan elemen a, lalu menuliskan alamat tujuan pada href. Perhatikan perubahan sebelum dan setelahnya:

<p>Kursus resmi tersedia di laman panduan web.</p>

<p>Kursus resmi tersedia di <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development">laman panduan web</a>.</p>

Output yang Dihasilkan:

Browser menampilkan paragraf yang sama, tetapi frasa "laman panduan web"
kini menjadi link yang dapat diklik; teks lainnya tetap statis.

Hanya teks yang dibungkus elemen a yang berperilaku sebagai link. Teks di luar elemen tersebut tetap biasa meskipun berada di paragraf yang sama. Inilah pola dasar yang kita pakai berulang kali: pilih teks, bungkus dengan a, isi href.

Teks Link yang Deskriptif #

Teks link sebaiknya menyebutkan isi halaman tujuan. Browser, mesin pencari, dan screen reader memperlakukan teks link sebagai gambaran singkat atas tujuannya, sehingga frasa generik memberi informasi yang minim. Bandingkan dua pilihan berikut:

Untuk sekarang, biasakan menulis teks link yang berdiri sendiri tanpa perlu kalimat sekitarnya. Chapter Link yang Aksesibel di akhir section ini membahas aturan tersebut lebih dalam, termasuk cara screen reader menyajikan link.

Link yang Membungkus Elemen Lain #

HTML5 mengizinkan elemen a membungkus konten blok: heading, paragraf, daftar, hingga gambar. Aturannya disebut transparent — a boleh berisi apa pun yang boleh berisi elemen induknya. Model ini sering kita pakai untuk menjadikan gambar dapat diklik, misalnya logo yang mengarah ke beranda:

<a href="index.html">
  <img src="logo-toko.svg" alt="Logo Toko Budi" width="96" height="96">
</a>

Output yang Dihasilkan:

Browser menampilkan gambar logo; seluruh area gambar menjadi wilayah klik
yang mengarah ke index.html.

Contoh Lengkap dalam Satu File #

File berikut merangkum seluruh variasi di atas dalam satu halaman tentang toko sederhana. Simpan dokumen HTML dan gambar logo-toko.svg di folder yang sama, lalu buka dokumen HTML di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Toko Budi</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <p>
    <a href="index.html">
      <img src="logo-toko.svg" alt="Logo Toko Budi" width="96" height="96">
    </a>
  </p>
  <p>Selamat datang di toko serba ada milik Budi. Daftar barang tersedia di
    <a href="katalog.html">halaman katalog produk</a>.</p>
  <p>Referensi belajar web: <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Toko Budi"
  - Gambar logo yang dapat diklik menuju index.html
  - Paragraf sambutan dengan link "halaman katalog produk"
  - Link eksternal "MDN Web Docs" menuju developer.mozilla.org

Mari kita telaah tiga link yang bekerja pada file di atas:

1. Baris 11-13 (a membungkus img): seluruh gambar berperilaku sebagai satu link menuju index.html; atribut alt pada img tetap wajib agar gambar tetap bermakna saat gagal dimuat.
2. Baris 15-16 (link katalog.html): teks biasa di dalam paragraf diubah menjadi link; nilai href berupa nama file sefolder, bentuk relative URL paling ringkas.
3. Baris 17 (link MDN): href berisi URL absolut dengan scheme https; bentuk ini kita pakai ketika tujuan berada di luar situs sendiri.

Seluruh contoh memakai dua jenis alamat: relative URL seperti katalog.html dan absolute URL seperti https://developer.mozilla.org/. Perbedaan keduanya, beserta penulisan path untuk naik dan turun folder, kita bedah tuntas pada Chapter berikutnya, Absolute dan Relative URL.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen a
• MDN Web Docs — Creating links
• WHATWG — HTML Living Standard: Elemen a

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Toko Budi</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <p>
    <a href="index.html">
      <img src="logo-toko.svg" alt="Logo Toko Budi" width="96" height="96">
    </a>
  </p>
  <p>Selamat datang di toko serba ada milik Budi. Daftar barang tersedia di
    <a href="katalog.html">halaman katalog produk</a>.</p>
  <p>Referensi belajar web: <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
</body>
</html>