Tutorial HTML #6 - Membuat Link (Tautan) dengan Tag <a></a> di HTML dan Studi Kasus

Assalamualaikum sobat blogger semua, kita lanjut lagi ya seri tutorial HTML Dasar kita! Di artikel sebelumnya kita udah sukses bikin poin-poin rapi pakai List. Sekarang, kita akan belajar elemen yang bikin sebuah halaman web jadi hidup dan saling terhubung, yaitu Link (Tautan).

Bayangkan kalau internet gak ada link, kita gak bakal bisa pindah halaman pas ngeklik menu navigasi, tombol download, atau ikon media sosial. Di HTML, semua keajaiban perpindahan halaman itu dibuat menggunakan satu tag sederhana bernama Anchor Tag atau tag <a>. Yuk, langsung kita bedah cara pakainya!

Cara Menulis Tag Link di HTML

Tag link wajib menggunakan atribut bernama href (Hypertext Reference). Atribut inilah yang bertugas menampung alamat URL atau tujuan halaman saat link tersebut diklik.

Format Dasarnya Kayak Gini:

<a href="https://alamat-tujuan.com">Teks yang Diklik</a>

Selain itu, ada satu atribut penting lagi yang wajib lu tahu, yaitu target="_blank". Kalau lu tambah atribut ini, link-nya bakal otomatis terbuka di tab baru browser, jadi halaman web utama lu gak bakal ketutup oleh pembaca.

🛠️ Studi Kasus: Membuat Halaman Biodata & Link Sosmed (Mini Linktree)

Biar langsung paham fungsinya di dunia nyata, yuk kita bikin project mini! Kita akan membuat sebuah halaman profil biodata sederhana yang isinya tombol-tombol link menuju media sosial kalian sendiri.

Silakan buka VS Code lu, buat file baru bernama latihan-link.html, lalu ketikkan kode lengkap di bawah ini di dalam tag <body>:

Kode Studi Kasus:

<h2>Fikri Ramdani - Digital Creator</h2>
<p>Halo! Selamat datang di halaman profil gua. Silakan kunjungi media sosial dan portofolio gua lewat link di bawah ini:</p>

<h3>My Social Media:</h3>
<!-- Menggunakan List agar susunan link rapi ke bawah -->
<ul>
    <li>
        <a href="https://www.tiktok.com" target="_blank">Ikuti gua di TikTok</a>
    </li>
    <li>
        <a href="https://shopee.co.id" target="_blank">Cek Toko Digital Shopee Gua</a>
    </li>
    <li>
        <a href="https://www.youtube.com" target="_blank">Nonton Konten Animasi di YouTube</a>
    </li>
</ul>

<hr/>
<!-- Contoh Internal Link (Menuju halaman lain di dalam web yang sama) -->
<p>Mau belajar koding dari awal? <a href="index.html">Kembali ke Halaman Utama Beranda</a></p>

Hasil Output di Browser:

Fikri Ramdani - Digital Creator

Halo! Selamat datang di halaman profil gua. Silakan kunjungi media sosial dan portofolio gua lewat link di bawah ini:

My Social Media:

Mau belajar koding dari awal? Kembali ke Halaman Utama Beranda

💡 Perbedaan Link Internal vs Link Eksternal

Dalam dunia pembuatan web, lu harus bisa membedakan dua jenis link ini berdasarkan tujuannya:

Link Eksternal: Link yang mengarah ke luar website lu (seperti contoh link TikTok dan Shopee di atas). Lu wajib pakai URL lengkap dengan https:// dan disarankan pakai atribut target="_blank" agar pengunjung ngga kabur dari blog lu.
Link Internal: Link yang mengarah ke halaman lain tetapi masih di dalam satu website yang sama (seperti contoh link kembali ke beranda di atas). Lu cukup panggil nama file targetnya saja, misalnya href="tentang.html" atau href="kontak.html" tanpa perlu ketik alamat domain panjang-panjang.

Kesimpulan

Membuat tautan halaman di HTML sangatlah mudah menggunakan tag <a> dan atribut href. Teknik penggabungan antara List dan Link seperti pada studi kasus di atas adalah rahasia dasar bagaimana para web developer membuat menu navigasi (*navbar*) di bagian atas website-website keren saat ini.

Sampai di sini dulu tutorial kita hari ini. Silakan langsung ganti alamat URL di atas pakai akun medsos kalian masing-masing dan uji coba di laptop! Kalau link-nya gak bisa diklik atau malah nyasar, langsung aja curhat di Kolom Komentar bawah ya.

Sampai jumpa di tutorial selanjutnya!

📸 Teks & Link Sudah Aman, Lalu Bagaimana dengan Gambar?

Halaman web kita udah makin interaktif nih! Tapi rasanya masih kurang afdol dan membosankan kalau isinya cuma tulisan doang. Yuk, kita pelajari gimana caranya memasukkan elemen gambar biar website lu makin estetik dan profesional!

Lanjut ke Tutorial #7: Menampilkan Gambar di HTML →