Cara membuat hyperlink dengan HTML adalah keterampilan dasar yang wajib kalian kuasai untuk membangun navigasi website yang rapi, konsisten, dan ramah mesin telusur.
Halo teman-teman, semoga kalian sehat dan semangat belajar! Pada artikel ini kodelyly.com akan membahas langkah-langkah praktis, contoh-contoh kode, serta tips SEO dan aksesibilitas agar tautan kalian tidak hanya berfungsi, tetapi juga optimal.
Cara Membuat Hyperlink Dengan HTML
Tag utama untuk membuat hyperlink adalah <a> (anchor). Intinya, kalian memberikan alamat tujuan melalui atribut href, lalu menulis teks yang bisa diklik oleh pengguna.
<a href="https://kodelyly.com">Kunjungi kodelyly.com</a>
Struktur umum:
<a href="ALAMAT_TUJUAN">TEKS_TAUTAN</a>
Struktur Dasar Tag Anchor
Gunakan atribut-atribut berikut untuk mengontrol perilaku hyperlink:
| Atribut | Fungsi singkat | Contoh |
|---|---|---|
href | Menentukan alamat tujuan (URL, mailto:, tel:, atau id elemen). | <a href="/tentang">Tentang</a> |
target | Mengatur tempat membuka link (mis. tab baru). | <a href="https://kodelyly.com" target="_blank">Buka</a> |
rel | Relasi/keamanan saat target="_blank" (disarankan noopener). | <a href="…" target="_blank" rel="noopener">Aman</a> |
title | Menambah keterangan singkat (tooltip). | <a href="…" title="Profil Perusahaan">Profil</a> |
download | Mengunduh file alih-alih membukanya. | <a href="/file.pdf" download>Unduh PDF</a> |
Contoh Hyperlink Yang Sering Dipakai
- Link eksternal (tab baru + aman):
<a href="https://kodelyly.com" target="_blank" rel="noopener">Kunjungi kodelyly.com</a>
- Link internal (ke halaman di situs yang sama):
<a href="/blog">Ke Halaman Blog</a>
- Link ke bagian tertentu di halaman (anchor ke id):
<a href="#fitur">Lihat Fitur</a>
<section id="fitur">…konten fitur…</section>
- Link email dan telepon:
<a href="mailto:hello@kodelyly.com?subject=Halo">Kirim Email</a>
<a href="tel:+6281234567890">Hubungi Kami</a>
Praktik SEO Dan Aksesibilitas Untuk Hyperlink
- Gunakan teks tautan yang deskriptif. Hindari “klik di sini”; pilih frasa bermakna seperti “Panduan SEO HTML”.
- Jaga konsistensi gaya: warna, hover, dan underline agar mudah dikenali sebagai link.
- Tambahkan
rel="nofollow"bila menaut ke halaman berbayar/sponsor sesuai kebutuhan editorial. - Pastikan kontras warna mencukupi dan dapat diakses dengan keyboard; link harus fokus saat ditekan Tab.
- Jika memakai
target="_blank", beri sinyal visual atau teks tambahan agar pengguna tahu link membuka tab baru.
Mini_cheatsheet
<!-- Dasar -->
<a href="/produk">Lihat Produk</a>
<!-- Tab baru + aman -->
<a href="https://kodelyly.com" target="_blank" rel="noopener">Kunjungi kodelyly.com</a>
<!-- Anchor ke bagian -->
<a href="#kontak">Kontak</a>
<section id="kontak">Formulir</section>
<!-- Email & Telepon -->
<a href="mailto:cs@kodelyly.com">Email CS</a>
<a href="tel:+621234567890">Telepon</a>
Kesimpulan
Cara membuat hyperlink dengan HTML sangat sederhana: gunakan <a> dengan href yang tepat, pilih teks tautan yang deskriptif, serta terapkan atribut pendukung seperti target dan rel untuk pengalaman yang aman dan nyaman. Dengan praktik SEO dan aksesibilitas yang benar, tautan kalian akan membantu pengguna dan mesin telusur memahami struktur situs. Sekian artikel dari kodelyly.com, semoga bermanfaat dan sampai jumpa di tutorial berikutnya!