Langsung ke konten

Relative vs Absolute Path: Perbedaan Path di HTML

Pelajari perbedaan relative path dan absolute path di HTML. Pahami kapan menggunakan path relatif dan absolut untuk mengakses file gambar, CSS, dan link.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami image <img>, saatnya kita memahami cara kerja path — kunci untuk mengakses file gambar, stylesheet, script, dan link di HTML.

Apa itu Path?

Path adalah lokasi file atau direktori dalam sistem file. Saat kamu membuat website, kamu akan sering mengakses file lain — gambar, CSS, JavaScript, atau halaman HTML lainnya. Path menentukan ke mana browser harus mencari file tersebut.

Ada dua jenis path utama di HTML:

  1. Relative Path — Lokasi file relatif terhadap file saat ini
  2. Absolute Path — Lokasi file lengkap dari awal (root)

Struktur Direktori Website

Sebelum memahami path, penting untuk mengetahui struktur direktori website yang umum:

website/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    ├── logo.png
    ├── banner.jpg
    └── gallery/
        └── photo1.jpg

Setiap / menandakan direktori (folder). File index.html berada di root directory, sementara gambar berada di subdirektori images/.

Relative Path

Relative path adalah lokasi file yang dihitung dari posisi file HTML saat ini. Path ini tidak dimulai dengan / atau http://.

Contoh Dasar

Misalnya file index.html berada di root:

<!-- File index.html di root -->
<img src="images/logo.png" alt="Logo" />
<a href="about.html">Tentang Kami</a>
<link rel="stylesheet" href="css/style.css" />

Browser akan mencari file logo.png di dalam folder images/ yang berada satu level di bawah root.

Menggunakan ./ (Titik)

./ menunjukkan direktori saat ini. Secara teknis, ini sama dengan tidak menulis apa-apa:

<!-- Kedua cara ini sama -->
<img src="images/logo.png" alt="Logo" />
<img src="./images/logo.png" alt="Logo" />

Menggunakan ../ (Titik Dua)

../ digunakan untuk naik satu level ke direktori induk (parent directory):

<!-- File: gallery/index.html -->
<!-- Mau mengakses logo.png di root -->

<!-- Salah: logo.png tidak ada di folder gallery -->
<img src="logo.png" alt="Logo" />

<!-- Benar: naik satu level dulu -->
<img src="../logo.png" alt="Logo" />

Navigasi dengan ../

Kamu bisa menggunakan ../ berulang kali untuk naik beberapa level:

<!-- Naik dua level -->
<img src="../../images/logo.png" alt="Logo" />

Contoh Lengkap Relative Path

<!DOCTYPE html>
<html lang="id">
  <head>
    <!-- CSS dari folder css/ -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="../css/responsive.css" />
  </head>
  <body>
    <!-- Gambar dari folder images/ -->
    <img src="images/logo.png" alt="Logo" />
    <img src="images/gallery/photo1.jpg" alt="Foto" />

    <!-- Link ke halaman lain -->
    <a href="about.html">Tentang</a>
    <a href="contact.html">Kontak</a>

    <!-- JavaScript dari folder js/ -->
    <script src="js/script.js"></script>
  </body>
</html>

Absolute Path

Absolute path adalah lokasi file yang lengkap, dimulai dari root server atau domain. Path ini selalu dimulai dengan https:// atau /.

URL Lengkap

<img src="https://www.example.com/images/logo.png" alt="Logo" />
<a href="https://www.example.com/about.html">Tentang Kami</a>
<link rel="stylesheet" href="https://www.example.com/css/style.css" />

Absolute path dengan URL lengkap bisa mengakses file dari server mana pun, tidak hanya dari website yang sama.

Path dari Root Server

Path yang dimulai dengan / dianggap sebagai absolute path dari root server:

<!-- Root server: https://www.example.com -->
<img src="/images/logo.png" alt="Logo" />
<a href="/about.html">Tentang Kami</a>
<link rel="stylesheet" href="/css/style.css" />

Browser akan mencari file dari root domain, bukan dari lokasi file HTML saat ini.

Perbandingan Relative vs Absolute Path

AspekRelative PathAbsolute Path
Dimulai denganTidak ada karakter khusushttps:// atau /
Bergantung padaLokasi file saat iniRoot server/domain
PortabilitasMudah dipindahTergantung server
Penggunaan umumFile internalResource eksternal
Contohimages/logo.pnghttps://example.com/logo.png

Kapan Menggunakan Relative Path?

1. File Internal Website

Untuk file yang merupakan bagian dari website yang sama:

<!-- Menggunakan relative path -->
<img src="images/photo.jpg" alt="Foto" />
<link rel="stylesheet" href="css/style.css" />
<a href="about.html">Tentang</a>

2. Saat Development Lokal

Relative path memudahkan development karena tidak bergantung pada domain tertentu. Kamu bisa membuka file HTML langsung di browser tanpa server:

<!-- Bisa dibuka langsung di browser (file:///) -->
<img src="images/photo.jpg" alt="Foto" />

3. Saat Ingin Memindahkan Website

Jika kamu memindahkan website ke domain lain, relative path tetap berfungsi tanpa perlu mengubah kode:

<!-- Tetap berfungsi di domain mana pun -->
<img src="images/photo.jpg" alt="Foto" />

Kapan Menggunakan Absolute Path?

1. Resource dari CDN

Konten dari Content Delivery Network harus menggunakan absolute path:

<!-- CDN Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<!-- CDN Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

2. Resource Eksternal

Gambar atau file dari website lain:

<img src="https://www.example.com/images/photo.jpg" alt="Foto dari external" />
<a href="https://www.google.com">Google</a>

Untuk link yang harus berfungsi di mana saja (email, media sosial):

<!-- Untuk dibagikan via email/social media -->
<a href="https://www.example.com/products">Lihat Produk</a>

4. SEO dan Open Graph

Meta tag untuk SEO dan sharing sosial media memerlukan absolute path:

<meta property="og:image" content="https://www.example.com/images/og-image.jpg" />
<link rel="canonical" href="https://www.example.com/artikel" />

Best Practice Path di HTML

1. Gunakan Relative Path untuk File Internal

<!-- ✅ Baik -->
<img src="images/photo.jpg" alt="Foto" />
<link rel="stylesheet" href="css/style.css" />

<!-- ❌ Tidak perlu -->
<img src="https://www.mywebsite.com/images/photo.jpg" alt="Foto" />

2. Gunakan Absolute Path untuk Resource Eksternal

<!-- ✅ Baik -->
<img src="https://cdn.example.com/logo.png" alt="Logo" />

<!-- ❌ Tidak akan berfungsi -->
<img src="cdn.example.com/logo.png" alt="Logo" />

3. Hindari Path yang Terlalu Panjang

<!-- ❌ Kurang jelas -->
<img src="../../../../images/photo.jpg" alt="Foto" />

<!-- Lebih baik: restructuring direktori -->
<img src="images/photo.jpg" alt="Foto" />

4. Konsisten dalam Penggunaan

Pilih salah satu pendekatan dan gunakan secara konsisten dalam satu website.

Troubleshooting Path yang Salah

Gambar Tidak Muncul

  1. Periksa path — Pastikan nama file dan direktori benar (case-sensitive)
  2. Periksa ekstensi — .jpg vs .jpeg, .png vs .PNG
  3. Buka DevTools — Tab Network untuk melihat error 404
  1. Periksa ekstensi file — .html vs .htm
  2. Periksa huruf besar/kecil — Server Linux case-sensitive
  3. Periksa apakah file ada — Pastikan file benar-benar ada di lokasi tersebut

Contoh Penggunaan Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CSS: relative path -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- CSS: absolute path (CDN) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <!-- Favicon: relative path -->
    <link rel="icon" href="images/favicon.ico" />

    <!-- Open Graph: absolute path -->
    <meta property="og:image" content="https://www.example.com/images/og-image.jpg" />

    <title>Contoh Path di HTML</title>
  </head>
  <body>
    <!-- Logo: relative path -->
    <header>
      <img src="images/logo.png" alt="Logo Website" />
      <nav>
        <a href="index.html">Beranda</a>
        <a href="about.html">Tentang</a>
        <a href="contact.html">Kontak</a>
      </nav>
    </header>

    <main>
      <!-- Gambar artikel: relative path -->
      <article>
        <img src="images/articles/artikel-1.jpg" alt="Gambar artikel" />
        <h2>Judul Artikel</h2>
        <p>Isi artikel...</p>
      </article>

      <!-- Gambar dari CDN: absolute path -->
      <section>
        <h3>Partner Kami</h3>
        <img src="https://cdn.example.com/partner-logo.png" alt="Logo Partner" />
      </section>

      <!-- Link eksternal: absolute path -->
      <section>
        <h3>Ikuti Kami</h3>
        <a href="https://twitter.com/hanifmu" target="_blank" rel="noopener noreferrer">
          Twitter
        </a>
        <a href="https://github.com/hanifmu" target="_blank" rel="noopener noreferrer">
          GitHub
        </a>
      </section>
    </main>

    <!-- JavaScript: relative path -->
    <script src="js/script.js"></script>
  </body>
</html>

Ringkasan

  • Relative path — Lokasi file relatif terhadap file HTML saat ini
  • Absolute path — Lokasi file lengkap dari root server/domain
  • Gunakan ./ untuk direktori saat ini dan ../ untuk naik ke direktori induk
  • Relative path cocok untuk file internal website
  • Absolute path wajib untuk resource CDN dan link yang harus berfungsi di mana saja
  • Selalu periksa path yang salah jika gambar atau link tidak berfungsi

Langkah Selanjutnya

Kamu sudah memahami perbedaan relative dan absolute path di HTML. Ini menyelesaikan seri Link dan Image. Di artikel selanjutnya, kita akan memasuki modul baru dan belajar tentang ordered list <ol> — cara membuat list berurutan di HTML.