Halo teman-teman! Kali ini, kita akan belajar tentang salah satu fitur paling penting di HTML, yaitu link atau tautan. Dalam HTML, kita menggunakan tag <a> (anchor) untuk membuat link.
Dengan link, kita bisa menghubungkan satu halaman ke halaman lain, membuka situs eksternal, atau bahkan membuat tombol untuk menghubungi via email atau WhatsApp.
1. Struktur Dasar Tag <a>
Format dasarnya seperti ini:
<a href="https://www.google.com">Kunjungi Google</a>
href adalah atribut yang menentukan ke mana link akan menuju.- Teks di antara tag
<a> akan menjadi klik-able oleh pengguna.
2. Link ke Website Eksternal
Untuk menuju ke website lain, kita cukup masukkan URL lengkap:
<a href="https://santrikoding.com">Belajar di SantriKoding</a>
Kalau kita ingin link terbuka di tab baru, tambahkan atribut target="_blank":
<a href="https://santrikoding.com" target="_blank">Buka di Tab Baru</a>
⚠️ Demi keamanan, kalau pakai target="_blank", disarankan juga menambahkan rel="noopener noreferrer".
<a href="https://santrikoding.com" target="_blank" rel="noopener noreferrer">SantriKoding</a>
3. Link ke Halaman Lain di Website Kita
Kalau kita punya beberapa halaman HTML, kita bisa membuat link antar file. Misalnya:
<a href="tentang.html">Halaman Tentang</a>
<a href="kontak.html">Halaman Kontak</a>
Pastikan file tentang.html dan kontak.html berada di folder yang sama dengan file HTML utama.
4. Link ke Bagian Tertentu di Halaman (Anchor Link)
Kita juga bisa membuat link yang mengarah ke bagian tertentu dalam halaman yang sama dengan menggunakan id.
<!-- Tautan -->
<a href="#kontak">Lompat ke Kontak</a>
<!-- Tujuan -->
<h2 id="kontak">Kontak Kami</h2>
5. Link ke Email dan WhatsApp
Ingin buat link untuk mengirim email atau WhatsApp?
-
Email:
<a href="mailto:halo@example.com">Kirim Email</a>
-
WhatsApp:
<a href="https://wa.me/6281234567890">Chat di WhatsApp</a>
Pastikan nomor diawali kode negara (Indonesia: 62), tanpa tanda +.
6. Contoh Lengkap Penggunaan Tag <a>
<p>
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Cari di Google</a>
</p>
<p>
<a href="tentang.html">Baca Tentang Kami</a>
</p>
<p>
<a href="#footer">Lompat ke Bawah</a>
</p>
<p>
<a href="mailto:support@example.com">Hubungi via Email</a>
</p>
<p>
<a href="https://wa.me/6281234567890">Hubungi via WhatsApp</a>
</p>
<!-- Bagian bawah halaman -->
<footer id="footer">
<p>© 2025 Website Kita</p>
</footer>
Kesimpulan
Di artikel ini, kita sudah belajar bagaimana cara membuat berbagai jenis link menggunakan tag <a>, mulai dari link ke situs lain, halaman lokal, bagian halaman, hingga email dan WhatsApp.
Di seri berikutnya, kita akan belajar cara menampilkan gambar di HTML dengan tag <img>.
Terima Kasih