Ketika membangun sebuah website, tautan (link) dan navigasi adalah dua komponen penting yang membantu pengguna berpindah dari halaman satu ke halaman lain. Tanpa adanya navigasi yang baik, pengguna mungkin akan kesulitan menjelajahi konten yang ada di dalam website kita. Pada artikel ini, kita akan membahas bagaimana membuat tautan, serta membangun navigasi sederhana sekaligus praktek terbaik agar struktur website kamu ramah pengguna dan SEO Friendly.

Link Pada HTML

Istilah Link dalam HTML bisa dibuat menggunakan tag <a>, yang merupakan singkatan dari anchor. Tautan yang kita definisikan dapat mengarah ke:

Halaman lain yang ada di dalam website kita (internal link)
Halaman dari website lain (external link)
Bagian tertentu didalam website pada halaman yang sama Berikut adalah contoh deklarasi link pada HTML.

<a href="https://nganggurdev.com">Visit me!</a>

Coba kita pahami dari contoh diatas:

<a> tag pembuka untuk membuat link
href attribute untuk menentukan tujuan dari link tersebut.
Teks diantara tag <a> dan </a> adalah bagian yang bisa diklik oleh pengguna.

Navigasi Pada HTML

Navigasi adalah sekumpulan link yang digunakan untuk memudahkan pengguna menjelejahi situs. Umumnya, navigasi diletakkan bagian atas halaman dan dibungkus menggunakan elemen semantik seperti <nav>. Berikut contoh dari navigasi sederhana.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/article">Article</a></li>
    <li><a href="/about-us">About Us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Jenis-Jenis Link dalam HTML

Terdapat tiga jenis link dalam HTML yaitu Internal Link, External Link, dan Anchor Link. Mari kita bahas satu persatu dan perhatikan contoh dari masing-masing ketiga jenis link.

Internal Link Mengarahkan halaman yang kita kunjungi di awal ke halaman lain dalam situs yang sama.

//link to article page
<a href="/article">Artikel</a>

External Link Mengarahkan ke situs lain.

<a href="https://www.google.com" target="_blank">Visit Google</a>

Anchor Link Mengarahkan ke elemen spesifik atau bagian tertentu di halaman yang sama.

<a href="#goIntoSection3">Section 3</a>

<section id="goIntoSection3">
	<p>this is the same page on the section 3</p>
</section>

Best Practice Link dan Navigasi Untuk SEO

Agar sistem navigasi kamu ramah mesin pencari (browser) dan nyaman digunakan, terdapat beberapa tips yang perlu kalian ketahui sebagai berikut.

Pastikan anchor text jelas dan deskriptif, tidak hanya "Klik Disini"
Gunakan elemen <nav> untuk membungkus tag <a>
Selalu gunakan internal link untuk menghubungkan antar konten dan memperkuat struktur situs
Hindari terlalu banyak link (spam) yang tidak terlalu penting dalam satu halaman Berikut adalah contoh implementasi navigasi pada HTML dan menerapkan SEO Friendly.

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Learn HTML Bsic: Link and Navigation - NganggurDev</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Newest Article</h2>
        <p>Read more article from us <a href="/blog/html-semantic">here</a>.</p>
      </article>
    </main>

    <footer>
      <p>© 2025 NganggurDev. All rights reserved.</p>
    </footer>
  </body>
</html>

Kesimpulan

Memahami cara kerja link dan navigasi di HTML termasuk langkah penting dalam membangun website yang terstruktur, ramah pengguna, dan SEO Friendly. Degnan begitu, website kamu akan jauh lebih mudah diakses, baik oleh pengguna maupun mesin pencari.

Terimakasih, sampai jumpa di artikel selanjutnya.

Belajar HTML Untuk Pemula #4: Link dan Navigasi

Link Pada HTML

Navigasi Pada HTML

Jenis-Jenis Link dalam HTML

Best Practice Link dan Navigasi Untuk SEO

Kesimpulan