Tutorial HTML #6 - Cara Membuat Link atau Tautan dengan Tag a di HTML

Pada tutorial HTML sebelumnya, kita sudah mempelajari cara membuat daftar menggunakan elemen <ul>, <ol>, dan <li>. Sekarang kita akan mempelajari salah satu elemen yang sangat penting dalam HTML, yaitu link atau tautan.

Link digunakan untuk menghubungkan satu halaman dengan halaman lainnya. Dengan link, pengunjung dapat berpindah ke halaman lain, membuka website berbeda, mengunduh file, atau menuju bagian tertentu dari sebuah halaman.

Dalam HTML, link dibuat menggunakan anchor element atau elemen <a>. Agar dapat menentukan tujuan link, kita menggunakan atribut href.

Pada tutorial ini, kita akan mempelajari cara menggunakan tag <a>, mengenal atribut pentingnya, serta membuat studi kasus sederhana menggunakan beberapa link.

🔗 Apa Itu Link dalam HTML?

Link adalah elemen yang memungkinkan pengguna berpindah dari satu lokasi ke lokasi lainnya ketika link tersebut diklik.

Contohnya, sebuah halaman website dapat memiliki link menuju:

Halaman lain dalam website yang sama.
Website atau domain lain.
Bagian tertentu dalam halaman yang sama.
File yang dapat dibuka atau diunduh.

HTML menyediakan elemen <a> untuk membuat berbagai jenis tautan tersebut.

🧩 Cara Membuat Link dengan Tag <a>

Bentuk dasar link dalam HTML adalah:

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

Elemen tersebut memiliki tiga bagian utama:

<a> adalah elemen untuk membuat tautan.
href menentukan alamat atau tujuan tautan.
Teks Link adalah teks yang dapat diklik oleh pengguna.

Contohnya:

<a href="https://www.google.com">Buka Google</a>

Ketika diklik, link tersebut akan mengarahkan pengguna ke alamat yang ditentukan pada atribut href.

🌐 Link ke Website Lain

Jika ingin membuat link menuju website lain, kita dapat menggunakan URL lengkap pada atribut href.

Contoh:

<a href="https://www.youtube.com">Buka YouTube</a>

URL lengkap biasanya menggunakan protokol https://. Saat link diklik, browser akan membuka alamat tersebut.

Membuka Link di Tab Baru

Secara default, browser biasanya akan membuka tujuan link pada tab atau halaman yang sedang digunakan.

Jika kita ingin membuka link pada tab baru, kita dapat menggunakan atribut target="_blank".

<a href="https://www.youtube.com" target="_blank" rel="noopener">
    Buka YouTube
</a>

Atribut target="_blank" meminta browser membuka tujuan pada konteks penjelajahan baru, yang pada browser modern umumnya berupa tab baru.

Jika menggunakan target="_blank", menambahkan rel="noopener" merupakan praktik yang baik untuk membantu membatasi akses halaman tujuan terhadap konteks halaman asal.

💡 Catatan: target="_blank" bukan atribut yang wajib digunakan pada setiap link. Gunakan sesuai kebutuhan dan konteks navigasi website.

🏠 Internal Link dan External Link

Berdasarkan tujuan navigasinya, link yang sering kita temui dalam website dapat dibedakan menjadi internal link dan external link.

1. Internal Link

Internal link adalah link yang mengarah ke halaman atau resource lain dalam website yang sama.

Misalnya kita memiliki struktur project:

website/
├── index.html
├── tentang.html
└── kontak.html

Dari index.html, kita dapat membuat link menuju halaman tentang.html seperti berikut:

<a href="tentang.html">Tentang Saya</a>

Untuk halaman yang berada di dalam folder berbeda, kita dapat menggunakan path sesuai struktur folder.

Contohnya:

website/
├── index.html
└── pages/
    └── kontak.html

Maka link dari index.html menuju halaman kontak dapat ditulis:

<a href="pages/kontak.html">Kontak</a>

Dalam website yang menggunakan sistem routing seperti WordPress, Blogger, atau framework web modern, internal link juga dapat menggunakan URL atau path sesuai sistem yang digunakan. Jadi, internal link tidak selalu harus berupa nama file HTML.

2. External Link

External link adalah link yang mengarah ke website atau domain lain.

Contohnya:

<a href="https://www.youtube.com">YouTube</a>

Karena tujuannya berada di domain berbeda, kita biasanya menggunakan URL lengkap.

🧪 Studi Kasus: Membuat Halaman Profil Sederhana

Sekarang kita akan membuat contoh sederhana untuk memahami penggunaan beberapa link sekaligus.

Kita akan membuat halaman profil yang berisi link menuju beberapa website dan satu halaman lain dalam project yang sama.

Langkah 1 — Buat Struktur Project

Buat struktur folder seperti berikut:

latihan-link/
├── index.html
└── profil.html

Langkah 2 — Buat File profil.html

Masukkan kode berikut ke dalam file profil.html:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Saya</title>
</head>

<body>

    <h1>Profil Saya</h1>

    <p>
        Selamat datang di halaman profil sederhana saya.
    </p>

    <h2>Link yang Saya Gunakan</h2>

    <ul>
        <li>
            <a href="https://www.youtube.com" target="_blank" rel="noopener">
                YouTube
            </a>
        </li>

        <li>
            <a href="https://www.tiktok.com" target="_blank" rel="noopener">
                TikTok
            </a>
        </li>

        <li>
            <a href="index.html">
                Kembali ke Beranda
            </a>
        </li>
    </ul>

</body>

</html>

Pada contoh tersebut, kita menggunakan dua jenis link.

Link YouTube dan TikTok merupakan external link.
Link "Kembali ke Beranda" merupakan internal link karena menuju file index.html dalam project yang sama.

Hasil Sederhana di Browser

Profil Saya

Selamat datang di halaman profil sederhana saya.

Link yang Saya Gunakan

🎯 Membuat Link Menuju Bagian Tertentu

Selain menuju halaman lain, tag <a> juga dapat digunakan untuk menuju bagian tertentu dalam halaman yang sama.

Caranya adalah dengan memberikan atribut id pada elemen tujuan.

Contohnya:

<h2 id="tentang">Tentang Website</h2>

<p>
    Website ini dibuat untuk latihan HTML.
</p>

Kemudian kita dapat membuat link menuju bagian tersebut:

<a href="#tentang">Baca Tentang Website</a>

Ketika link diklik, browser akan mengarahkan posisi halaman ke elemen yang memiliki id="tentang".

Teknik seperti ini sering digunakan untuk membuat daftar isi, navigasi pada halaman panjang, atau tombol "kembali ke atas".

📁 Link untuk Membuka atau Mengunduh File

Tag <a> juga dapat digunakan untuk membuat link menuju file tertentu.

Misalnya kita memiliki file PDF:

website/
├── index.html
└── file/
    └── panduan.pdf

Link menuju file tersebut dapat dibuat seperti berikut:

<a href="file/panduan.pdf">
    Buka Panduan PDF
</a>

Jika ingin meminta browser mengunduh file tersebut, kita dapat menggunakan atribut download:

<a href="file/panduan.pdf" download>
    Download Panduan PDF
</a>

Perlu diperhatikan bahwa perilaku atribut download dapat dipengaruhi oleh browser, konfigurasi server, dan sumber file yang digunakan.

⚠️ Kesalahan yang Sering Terjadi Saat Membuat Link

Saat pertama kali belajar HTML, beberapa kesalahan berikut cukup sering terjadi.

1. Lupa Menulis Atribut href

Contoh yang kurang tepat:

<a>Buka Website</a>

Gunakan href untuk menentukan tujuan link:

<a href="https://www.example.com">
    Buka Website
</a>

2. Salah Menulis Path

Jika link menuju file lokal tidak bekerja, periksa kembali struktur folder dan penulisan path.

Misalnya file berada di:

pages/kontak.html

Maka link dari halaman yang berada satu tingkat di atasnya dapat ditulis:

<a href="pages/kontak.html">Kontak</a>

3. Salah Menutup Tag

Pastikan elemen <a> memiliki tag penutup:

<a href="https://www.example.com">
    Buka Website
</a>

💡 Tips Membuat Link yang Baik

Ada beberapa kebiasaan yang sebaiknya mulai diterapkan sejak belajar HTML:

Gunakan teks link yang menjelaskan tujuan tautan.
Pastikan URL atau path yang digunakan benar.
Gunakan target="_blank" hanya ketika memang diperlukan.
Jika menggunakan target="_blank", sertakan rel="noopener".
Periksa link secara berkala agar tidak mengarah ke halaman yang sudah tidak tersedia.

Hindari penggunaan teks yang terlalu umum seperti "Klik di sini" jika ada pilihan yang lebih deskriptif. Misalnya, dibandingkan:

<a href="tutorial-css.html">Klik di sini</a>

lebih informatif jika menggunakan:

<a href="tutorial-css.html">
    Baca Tutorial CSS Dasar
</a>

Dengan begitu, pengguna dapat mengetahui tujuan link bahkan sebelum membukanya.

📚 Kesimpulan

Link merupakan bagian penting dalam HTML karena memungkinkan halaman dan resource saling terhubung. Link dibuat menggunakan elemen <a> dengan atribut href untuk menentukan tujuannya.

Beberapa hal yang sudah kita pelajari pada tutorial ini adalah:

Cara membuat link menggunakan tag <a>.
Fungsi atribut href.
Cara membuka link pada tab baru menggunakan target="_blank".
Perbedaan internal link dan external link.
Cara membuat link menuju bagian tertentu dalam halaman menggunakan id.
Cara membuat link menuju file.
Kesalahan umum ketika membuat link HTML.

Setelah memahami link, kita sudah memiliki beberapa elemen penting untuk membangun halaman web sederhana. Kita dapat menggabungkan Heading, Paragraph, List, dan Link untuk membuat struktur halaman yang lebih lengkap.

Pada tutorial berikutnya, kita akan mempelajari cara menampilkan gambar di HTML menggunakan elemen <img>, termasuk penggunaan atribut src dan alt.

📸 Selanjutnya: Cara Menampilkan Gambar di HTML

Setelah belajar membuat link, sekarang saatnya membuat halaman web lebih menarik dengan menambahkan gambar menggunakan HTML.

Lanjut ke Tutorial HTML #7: Menampilkan Gambar →

Ramdanifikri.id

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

🔗 Apa Itu Link dalam HTML?

🧩 Cara Membuat Link dengan Tag <a>

🌐 Link ke Website Lain

Membuka Link di Tab Baru

🏠 Internal Link dan External Link

1. Internal Link

2. External Link

🧪 Studi Kasus: Membuat Halaman Profil Sederhana

Langkah 1 — Buat Struktur Project

Langkah 2 — Buat File profil.html

Hasil Sederhana di Browser

Profil Saya

Link yang Saya Gunakan

🎯 Membuat Link Menuju Bagian Tertentu

📁 Link untuk Membuka atau Mengunduh File

⚠️ Kesalahan yang Sering Terjadi Saat Membuat Link

1. Lupa Menulis Atribut href

2. Salah Menulis Path

3. Salah Menutup Tag

💡 Tips Membuat Link yang Baik

📚 Kesimpulan

📸 Selanjutnya: Cara Menampilkan Gambar di HTML

Posting Komentar untuk "Tutorial HTML #6 - Membuat Link (Tautan) dengan Tag di HTML dan Studi Kasus"

Menu Halaman Statis