Belajar HTML - Elemen Tautan dan Navigasi
Episode ini membedah elemen tautan: atribut href untuk URL absolut dan relatif, fragment anchor ke dalam halaman, target dan rel untuk membuka tab baru, serta pola navigasi dengan aria-current.
#Pendahuluan
Tautan adalah yang membuat web menjadi web. Tanpa elemen a, setiap halaman berdiri sendiri. Episode 5 membahas elemen tautan dan navigasi — cara menghubungkan halaman, membuka tautan di tab baru, melompat ke bagian dalam halaman yang sama, serta menyusun navigasi yang dapat diakses.
Kalian juga akan belajar kebiasaan keamanan yang sering terlewat: kombinasi target dan rel yang benar saat membuka tab baru. Detail kecil ini penting untuk keamanan dan privasi pengguna.
#Anatomi Elemen Tautan
#a dan href
Tautan ditulis dengan elemen a (anchor) dan atribut href yang memuat tujuan:
<a href="https://developer.mozilla.org">MDN Web Docs</a>Teks di antara tag pembuka dan penutup adalah teks tautan yang terlihat. Teks ini sebaiknya deskriptif — alih-alih "klik di sini", tulis "dokumentasi MDN untuk HTML". Teks yang deskriptif membantu screen reader dan SEO.
#Jenis-jenis href
#URL Absolut dan Relatif
href bisa berisi dua jenis alamat:
- Absolut: URL lengkap dengan protokol, seperti
https://example.com/halaman. Dipakai untuk menuju situs lain. - Relatif: path dari halaman saat ini, seperti
tentang.htmlatau../beranda.html. Dipakai untuk menuju halaman di situs yang sama.
<a href="https://example.com">Situs eksternal</a>
<a href="/panduan.html">Halaman di root situs</a>
<a href="../beranda.html">Halaman di folder induk</a>Path relatif lebih fleksibel karena tidak bergantung pada domain — halaman akan tetap bekerja meski dipindahkan ke domain lain.
#Fragment Anchor
Fragment ditandai dengan tanda # diikuti id elemen tujuan. Klik tautan akan melompat ke elemen tersebut:
<a href="#bagian-daftar">Lompat ke daftar</a>
<h2 id="bagian-daftar">Daftar Belanja</h2>
<ul>
<li>Beras</li>
<li>Minyak goreng</li>
</ul>Nilai id harus unik dalam satu halaman. Fragment juga bisa dikombinasikan dengan path, misalnya panduan.html#instalasi.
#mailto dan tel
Dua skema khusus untuk tindakan, bukan navigasi:
<a href="mailto:halo@contoh.id">Kirim email</a>
<a href="tel:+6281234567890">Hubungi kami</a>mailto membuka aplikasi email dengan alamat yang terisi; tel memanggil nomor di perangkat mobile.
#target dan rel
#Membuka Tab Baru dengan Aman
Atribut target="_blank" membuka tautan di tab baru. Namun tanpa rel, halaman baru bisa mengakses objek window.opener halaman asal — celah keamanan bernama reverse tabnabbing.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Buka di tab baru
</a>Kombinasi rel="noopener noreferrer" memutus akses window.opener dan mencegah browser mengirim informasi referrer. Biasakan selalu menambahkan keduanya setiap memakai target="_blank".
#rel Lain yang Berguna
rel="nofollow"memberi tahu search engine agar tidak mengikuti tautan.rel="external"menandai tautan ke situs luar.
#Navigasi yang Dapat Diakses
#Membangun Elemen nav
Untuk kelompok tautan utama halaman, gunakan elemen nav. Pola paling umum: ul berisi tautan, dibungkus nav.
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</nav>Elemen nav menandai blok navigasi sehingga screen reader bisa langsung melompat ke menu. Detail nav dan struktur navigasi yang baik untuk SEO akan kita perdalam di episode 12.
#Menandai Halaman Aktif
Saat menandai halaman yang sedang aktif, gunakan aria-current="page":
<a href="/beranda" aria-current="page">Beranda</a>Atribut aria-current="page" memberi tahu screen reader bahwa tautan ini menunjuk ke halaman yang sedang dibuka — tanpa menandai secara visual, pengguna yang berpindah lewat pembaca layar tetap tahu posisi mereka.
#Latihan: Menghubungkan Halaman
Buat dua halaman yang saling terhubung. Di index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beranda</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/index.html" aria-current="page">Beranda</a></li>
<li><a href="/tentang.html">Tentang</a></li>
</ul>
</nav>
<h1>Selamat Datang</h1>
<p>Ini halaman beranda. Kunjungi <a href="/tentang.html">halaman tentang</a> untuk tahu lebih lanjut.</p>
<p><a href="#kontak">Lompat ke kontak</a></p>
<h2 id="kontak">Kontak</h2>
<p>Email: <a href="mailto:halo@contoh.id">halo@contoh.id</a></p>
</body>
</html>Buka lewat server lokal, lalu gunakan tautan untuk berpindah halaman. Verifikasi juga lewat terminal dengan curl -s http://localhost:8080/tentang.html untuk memastikan halaman kedua tersedia.
#Kesalahan Umum dan Solusinya
#target=_blank Tanpa rel
Selalu pasangkan rel="noopener noreferrer" saat membuka tab baru. Tanpa ini, halaman tujuan punya akses ke window.opener halaman kalian.
#Teks Tautan yang Tidak Deskriptif
Teks seperti "klik di sini" tidak menjelaskan tujuan. Gunakan teks yang menyebutkan tujuannya, sehingga pengguna screen reader yang menelusuri daftar tautan tetap paham.
#Penutup
Episode 5 membuat halaman kalian saling terhubung: tautan absolut dan relatif, fragment untuk lompat dalam halaman, mailto dan tel, serta navigasi yang aman dan dapat diakses dengan target, rel, dan aria-current.
Inti yang harus dibawa pulang:
adenganhrefadalah cara membuat tautan; tulis teks tautan yang deskriptif.#iduntuk melompat ke bagian dalam halaman;idharus unik.target="_blank"wajib disertairel="noopener noreferrer".mailto:dantel:membuka aplikasi email dan panggilan.- Gunakan
aria-current="page"untuk menandai tautan aktif.
Di episode 6 selanjutnya kita akan membahas gambar dan media dasar — elemen img dengan atribut alt, figure dan figcaption, plus strategi loading="lazy" untuk gambar. Halaman kalian mulai memiliki daya tarik visual.