Atribut href menjawab “ke mana”; atribut rel menjawab “apa hubungannya”. Dengan rel, kita menyatakan relasi antara halaman saat ini dan halaman tujuan link — relasi keamanan, relasi posisi dalam seri artikel, atau relasi kepemilikan lisensi. Mesin pencari, browser, dan pembaca layar semuanya membaca atribut ini untuk mengambil keputusan yang tidak bisa mereka teka sendiri.

Apa Itu rel #

Aturan rel: atribut ini dipasang pada elemen a (dan area serta link) dengan nilai berupa satu atau beberapa kata kunci, dipisah spasi bila lebih dari satu. Urutan kata kunci bebas — rel="noopener external" dan rel="external noopener" bermakna sama. Nilai-nilai utama pada a:

NilaiHubungan yang dinyatakan
noopenerHalaman tujuan tidak diberi akses window.opener ke halaman kita
noreferrerSeperti noopener, plus tidak mengirim rujukan halaman asal
externalTujuan berada di luar situs kita
nofollowMeminta mesin pencari tidak mengikuti atau menilai link ini
helpTujuan menyediakan bantuan
licenseTujuan memuat informasi lisensi dokumen
prevDokumen sebelumnya dalam suatu seri
nextDokumen berikutnya dalam suatu seri

Contoh pemakaian tunggal dan gabungan:

html 
<p>Panduan resmi: <a href="https://example.com/panduan" rel="help">bantuan pemakaian</a>.</p>
<p><a href="https://example.org/ulasan" rel="noopener external">Ulasan pihak ketiga</a></p>

Mari kita telaah:

  1. Baris 1 (rel="help"): satu nilai — halaman tujuan dinyatakan sebagai materi bantuan; tautan bantuan seperti ini kadang mendapat perlakuan khusus dari perangkat bantu.
  2. Baris 2 (rel="noopener external"): dua nilai dipisah satu spasi — keamanan (noopener) dan letak (external) dinyatakan sekaligus pada satu link.

rel paling sering berperan justru pada link yang membuka tab baru. Klik link demo berikut — tab baru terbuka menuju example.com, sementara halaman ini tetap di tempat:

Link memuat halaman daring dan membutuhkan koneksi internet.

Atribut target="_blank" pada link itu yang meminta tab baru; tugas rel="noopener" menjaga sisi keamanan: halaman yang terbuka tidak menerima window.opener — pegangan yang bisa dipakai untuk mengarahkan halaman pembukanya. Browser modern memasang perlindungan ini otomatis pada setiap target="_blank", tetapi menuliskannya secara eksplisit tetap menjadi kebiasaan yang baik.

Artikel Berseri: prev dan next #

Seri artikel adalah kasus alami untuk rel. Halaman kedua dari seri tiga bagian menaut dua tetangganya:

html 
<nav>
  <ul>
    <li><a href="seduh-1.html" rel="prev">Bagian 1: Memilih Biji</a></li>
    <li><a href="seduh-3.html" rel="next">Bagian 3: Menyajikan</a></li>
  </ul>
</nav>

Kedua nilai ini pernah dipakai mesin pencari untuk memahami urutan seri, dan hingga kini tetap membantu alat bantu menyusun hubungan antardokumen. Pasangan prev/next hanya bermakna dalam satu seri — jangan dipasang pada navigasi situs umum.

Ringkasan #

  • rel menyatakan hubungan antara dokumen saat ini dan tujuan link.
  • Nilai boleh lebih dari satu, dipisah spasi, urutannya bebas.
  • Nilai utama pada a: noopener, noreferrer, external, nofollow, help, license, prev, next.
  • prev dan next menghubungkan artikel berseri; rel versi head dibahas di Section Metadata dan SEO.

Dari sini kita naik satu tingkat: bukan lagi satu link dan hubungannya, melainkan kelompok link yang membentuk navigasi situs — diawali elemen nav.